顯示三列中的帖子？

這幾行顯示我的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]); 
    }; 
}

我該怎麼做？

來源

2016-08-04 user3350511

什麼骯髒的方式來提供元素電網。它可以用10倍以下的JavaScript代碼完成，甚至可以用一個單獨的CSS代碼:)如果顯示你嘗試過的**，我會幫你。 –

不是我的代碼。這就是爲什麼我有點失落。恐怕只有一行CSS不夠用。你如何在JS/JQ中做到這一點？ – user3350511

直接回答你的問題，是的，你可以很容易地編輯該代碼，它現在可以使用三列：

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%; 
    } 
}

來源

2016-08-04 09:54:36

謝謝Yeldar。 – user3350511

這可能僅適用於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>

來源

2016-08-04 09:45:42 dippas

顯示三列中的帖子？

回答

相關問題