当slideDown具有多个列和行时，按下底部div

Question

我有多个项目，包含多个列和行

 <div class="items">
    <div class="item-1">
    <div class="item-2">
    <div class="item-3">
    <div class="item-4">
    <div class="item-5">
    ...
 </div>

我正在使用jQuery slidedown在点击时显示每个项目的隐藏内容。我想正确地推送底部内容，即扩展对象所属的同一列。

基本浮点示例：左和宽：33％

http://jsfiddle.net/kurtko/4w8n1frr/

我尝试了几种方法：

1）使用float：left的列，然后插入用PHP更改顺序的项目。从：1,2,3,4,5,6,7,8,9到1,4,7,2,5,8,3,6,9。

http://jsfiddle.net/kurtko/adLL8gmn/

<div class="items">    
 <div class="column>
   <div class="item-1">
   <div class="item-4">
   <div class="item-7">
 </div>
 <div class="column>
   <div class="item-2">
   <div class="item-5">
   <div class="item-8">
 </div>
</div>

这是一个很好的方法，但是当我使用一列的响应版本时，订单不正确。

2）砌体。 Masonry - Isotope有一个名为'masonryColumnShift'的自定义布局模式，但在当前版本2中被禁用。

http://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html

3）Flexbox。使用：

http://jsfiddle.net/kurtko/7cu5jvrr/

.items {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.item {
   width: 33.3%;
}

结果不错但不完美。当项目更改其高度时，会在该行下方创建一个空格。

有什么想法吗？

感谢。

Answer 1

更新（2015年4月21日）

这是我之前的重大更新。我使用jQuery查找所有div＆，并将它们排序为.new div。当屏幕变得小于600px时，我将它们重新置于原始配置中，然后将它们堆叠起来，以便在移动设备上更好地查看。

你可以看到它here。

＆＃13;

＆＃13;

$(document).ready(function() {
  var divsAccross = 3;       // DIV's accross
  var elmParent = '.items';  // Container Class
  var elmChild = '.item';    // Elements to be sorted
  var createdDiv = 'new';    // New DIV created to hold the new sort
  var sortBy = 'id';         // Sort Elements by...

  // Shouldn't have to edit anything below.
  var windowSize = $(window).width();
  var totalDivs = [];
  var scrnSize = "large";
  var newWidths = Math.floor(100 / divsAccross);
  var newMargin = (100 % divsAccross) / (divsAccross - 1);

  $(elmChild).each(function() {
    totalDivs.push($(this).attr(sortBy));
  });

  var matrix = listToMatrix(totalDivs, divsAccross);

  if (windowSize > 600) {
    reOrder(matrix);
    scrnSize = "large";
  } else {
    scrnSize = "small";
  }

  $(elmChild).click(function() {
    $(this).find('.hidden').slideToggle(500);
  });

  $(window).resize(function() {
    windowSize = $(window).width();

    if (windowSize <= 600) {
      if (scrnSize == "large") {
        var $mylist = $(elmParent);

        $mylist.find(elmChild).sort(function(a, b) {
          return +a.getAttribute(sortBy) - +b.getAttribute(sortBy);
        }).appendTo($mylist);
        $("." + createdDiv).remove();
        scrnSize = "small";
      }
    } else {
      if (scrnSize == "small") {
        reOrder(matrix);
        scrnSize = "large";
      }
    }
  });

  function reOrder(list) {
    for (var d = 0; d < list.length; d++) {
      for (var n = 0; n < list[d].length; n++) {
        $('#' + list[d][n]).addClass(' ' + d);
      }
      $('.' + d).wrapAll("<div class=" + createdDiv + "></div>");
      $('.' + createdDiv).css({
        'width': newWidths + '%',
        'margin': '0 ' + newMargin + '% 0 0'
      })
    }
  }

  function listToMatrix(list, elementsPerSubArray) {
    var matrix = [],
      i, k;
    var newMatrix = [],
      x, y;

    for (i = 0, k = -1; i < list.length; i++) {
      if (i % elementsPerSubArray === 0) {
        k++;
        matrix[k] = [];
      }
      matrix[k].push(list[i]);
    }

    for (x = 0; x < elementsPerSubArray; x++) {
      newMatrix[x] = [];
      for (y = 0; y < matrix.length; y++) {
        if (matrix[y][x] != null) {
          newMatrix[x].push(matrix[y][x]);
        }
      }
    }
    return newMatrix;
  }
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.items {
  margin: 0.5%;
  height: 100%;
}
.item {
  padding: 20px 0;
  margin: 0 5px 5px 0;
  background: darkgreen;
  text-align: center;
  width: 100%;
  border: 1px solid red;
  cursor: pointer;
  float: left;
}
.new {
  float: left;
}
.new:last-child {
  margin: 0 !important;
}
.hidden {
  display: none;
  margin-top: 20px;
  width: 100%;
  padding: 150px 0;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  background-color: orange;
}
@media all and (max-width: 600px) {
  .items {
    display: flex;
    flex-flow: row wrap;
    height: 100%;
  }
  .items > * {
    flex: 1 100%;
    width: 100%;
    float: none;
  }
  .two {
    order: 2;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="items">
  <div class="item" id="1">1
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="2">2
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="3">3
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="4">4
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="5">5
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="6">6
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="7">7
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="8">8
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="9">9
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="10">10
    <div class="hidden">Hide</div>
  </div>
  <div class="item" id="11">11
    <div class="hidden">Hide</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新（2015年4月22日）

更新了该功能，以防您计划拥有超过九个div并将所有控件放在最顶层。您不应该编辑除前五个变量之外的任何内容。你唯一能做的就是把它变成它自己的插件。

Answer 2

根据您的选项1。

将float: left替换为display: inline-block;优点是项目不会浮动并且将与其他项目保持在同一行。在展开时，行高将完成，使下一行完全按下。

也会起作用。

您还需要将垂直对齐设置为顶部。

Updated Fiddle