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

Question

我有以下div。假设每个div都向左浮动或将显示设置为内联块。

+-----------+ +-----------+ +--------------+
|    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/