显示三列中的帖子？

这几行显示我的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

显示三列中的帖子？

回答

相关问题