jquery - 将显示为行的 div 转换为显示为列的 div

Question

我有以下div。假设每个 div 向左浮动或将 display 设置为 inline-block。

+-----------+ +-----------+ +--------------+
|    1      | |     2     | |              |
+-----------+ |           | |      3       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|     4     | |     5     | |              |
+-----------+ |           | |      6       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|           | |    8      | |      9       |
|    7      | +-----------+ |              |
|           |               +--------------+
|           |
+-----------+

我想实现这样

+-------------+ +-----------+ +-------------+
|     1       | |     4     | |             |
+-------------+ +-----------+ |      7      |
+-------------+ +-----------+ |             |
|      2      | |      5    | |             |
|             | |           | +-------------+
+-------------+ +-----------+ +-------------+
+-------------+ +-----------+ |      8      | 
|             | |           | +-------------+
|       3     | |       6   + +-------------+
|             | |           | |     9       |
|             | +-----------+ |             |
+-------------+               +-------------+

我知道我可以按列做到这一点

<div class="col1">
  <div></div>
  <div></div>
  <div></div>
</div> 
<div class="col2">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col3">
  <div></div>
  <div></div>
  <div></div>
</div>

但是在我的网站上有更多这样的页面，所以我想在不触及标记的情况下实现。有什么想法可以使用 css 或任何 javascript/jquery 方法执行此操作吗？

Answer 1

使用 JS 和 jQuery很容易将“碟中谍”变成“爱丽丝梦游仙境”：

LIVE DEMO

HTML 示例：

<div id="cont"> 

   <div></div>
   <!-- ...more  <div></div> here ... -->

</div>

CSS 示例（.col将由 jQuery 添加）：

#cont .col > div{
  position:relative;
  width:250px;
  background:#eee;
  margin:2px;
  padding:15px;
}

.col{
  float:left;
}

jQuery：

$(function(){

    var cells = $('#cont > div');

    for(var i = 0; i < cells.length; i+=3) {
      cells.slice(i, i+3).wrapAll("<div class='col' />");
    }

});

Answer 2

不触及标记是使事情变得粘稠的原因。David DeSandro 使用名为 Masonry 的 jQuery 制作了一个运行良好的紧密级联网格系统，它可能可以帮助您解决这个问题：

http://masonry.desandro.com/