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

这可以通过使用columns属性

仅使用CSS来完成

像这样的东西

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>

Answer 2

直接回答您的问题，是的，您可以轻松编辑此代码，使其现在可以使用三列：

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

在三列中显示帖子？

2 个答案: