конвертировать divs, отображаемые как строки в divs, отображаемые как столбец

Question

У меня есть следующие divs. Предположим, что каждый 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

Не касаясь надбавок, что делает вещи липкими. Дэвид DeSandro сделал хорошо работающую систему жесткой каскадных сетки с JQuery называется масонством, он может быть в состоянии помочь вам с этим:

http://masonry.desandro.com/