Просмотр сообщений в трех столбцах?

Question

Эти несколько строк отображают мои сообщения WordPress в двух столбцах. Можно ли изменить его на три столбца?

if ($(window).width() > 600) { 
    var i = 0, 
    colOne = new Array(), 
    colTwo = new Array(); 
    jQuery('#cff .cff-item').each(function() { 
    i++; 
    var $self = jQuery(this); 

    function isEven(value) { 
     if (value % 2 == 0) 
     return true; 
     else 
     return false; 
    } 
    if (isEven(i)) { 
     colTwo.push($self); 
    } else { 
     colOne.push($self); 
    } 
    $self.remove(); 
    }); 
    $('#cff').prepend('<div class="col-one" style="width: 45%; float: left; margin: 0 2.5%;"></div><div class="col-two" style="width: 45%; float: left; margin: 0 2.5%;"></div>'); 
    for (var i = 0; i < colOne.length; i++) { 
    jQuery('#cff .col-one').append(colOne[i]); 
    }; 
    for (var i = 0; i < colOne.length; i++) { 
    jQuery('#cff .col-two').append(colTwo[i]); 
    }; 
} 

Как бы я это сделал?

Answer 1

Отвечая на Ваш вопрос напрямую, да, вы можете легко изменить этот код, например что теперь он работает с тремя колонками:

if ($(window).width() > 600) { 
    var columnsCount = 3; 
    var $columns = new Array(columnsCount); 

    // Create columns 
    for (var i = 0; i < columnsCount; i++) { 
     $columns[i] = $("<div class='col' style='float: left; margin: 0;'/>") 
     .css({ 
      "width": Math.floor(45/columnsCount).toFixed(2) + "%", 
      "margin-left": Math.floor(5.0/columnsCount).toFixed(2) + "%", 
      "margin-right": Math.floor(5.0/columnsCount).toFixed(2) + "%" 
     }); 
    } 

    // Relocate items 
    $("#cff .cff-item").each(function (i) { 
     $(this).appendTo($columns[i]); 
    }); 

    // Replace grid 
    $("#cff").empty(); 
    $columns.forEach(function($c) { $("#cff").append($c); }); 
} 

Однако, как я уже говорил, гораздо лучше достичь этого с помощью CSS.
Что-то вроде бы решить все ваши проблемы:

.cff-item { 
    display: inline-block; 
    width: 90%; 
    margin: 0 5%; 
    } 

@media (min-width: 600px) { 
    .cff-item { 
    width: 45%; 
    margin: 0 2.5%; 
    } 
} 

Answer 2

Это может быть сделано только с помощью CSS, используя columns свойство

Что-то вроде этого

div { 
 
    columns: 3; 
 
    -webkit-columns: 3; 
 
    -moz-columns: 3 
 
}

<div>Etiam posuere tristique ligula, quis euismod sem facilisis et. Mauris rhoncus lacus vitae dui dictum, sed iaculis ante pellentesque. Sed ut laoreet sem, ac accumsan arcu. Etiam orci ante, molestie semper leo vitae, varius mattis enim. Aliquam quis laoreet 
 
    mi. Aenean aliquam dolor ac accumsan faucibus. Sed ut risus sit amet quam accumsan blandit. Donec sit amet condimentum sapien. Fusce tincidunt sem eget justo ultricies vehicula. Nunc gravida, mi ut ultricies elementum, magna ante vestibulum augue, a 
 
    pretium lacus velit nec lectus. Vestibulum vitae purus vel erat commodo luctus nec a augue. Cras nec scelerisque enim. Etiam hendrerit vel diam et vehicula. Pellentesque finibus feugiat magna finibus pellentesque. Integer quis elementum ante, nec pellentesque 
 
    justo. Pellentesque eleifend facilisis elit ac posuere. Donec ac molestie massa. Phasellus finibus, eros nec auctor tempus, nisi diam tincidunt tortor, eu condimentum enim dolor eget elit. Etiam maximus dui bibendum tristique tincidunt. Vivamus euismod, 
 
    nisl nec faucibus cursus, metus justo accumsan lacus, nec hendrerit nisi risus nec purus. Duis auctor vel mi et ullamcorper. Nam quis felis id leo bibendum varius. In eu bibendum mi. Phasellus feugiat ligula elit, consectetur tempus lorem malesuada 
 
    ac. In vitae volutpat tellus. Aenean tempus pellentesque libero, ut pretium sem hendrerit sed. Phasellus nec imperdiet nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt ac justo et tempor. Ut elementum turpis a neque tristique 
 
    interdum. Morbi eleifend risus risus. Nulla ullamcorper arcu laoreet, malesuada sem eget, molestie libero. Donec volutpat turpis non finibus elementum. Sed sed mauris id dolor consectetur vulputate.</div>