純 CSS 實作兩豎排瀑布流布局

網上搜了好幾種辦法，實作出來的瀑布流效果如下：

這裡有個弊端，這并不符合瀑布流的原理，如果使用純css寫瀑布流，則每一塊都是從上往下排列，不能做到從左到右排列，并且不會識别哪一塊圖檔放在哪個地方合适，若是再配合動态加載，效果會特别不好

我們想要的瀑布流是什麼樣的？

 因為我是兩豎排是以可以用Float實作

 CSS

.box{
       width: 100%;   
}
.item{
    width: 50%;
}
.item:nth-child(n){
    float: left;
}
.item:nth-child(2n){
    float: right;
}      

Html

<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item">12</li>
    <li class="item">13</li>
    <li class="item">14</li>
    <li class="item">15</li>
</ul>      

兩排，float即可輕松實作

多排的話就需要JS計算

JS代碼實作

實作思路：

1. 　　設定每一列圖檔的寬度和間距
2. 　　擷取目前視窗的總寬度，進而根據圖檔寬度去旁段分成幾列
3. 　　擷取所有圖檔元素，定義一個空數組來儲存高度
4. 　　周遊所有容器，開始判斷　　當頁面加載完成，或頁面寬度發生變化時，調用函數。

• 如果目前處于第一行時： 直接設定圖檔位置【 即 top為間距的大小，left為（目前圖檔的寬度+間距） * 目前圖檔的值+間距大小 】，并儲存目前元素高度。
• 如果目前不處于第一行時：進行高度對比，通過周遊循環，拿到最小高度和相對應的索引，設定圖檔位置【 即 top為最小高度值+間距*2，left為 （目前圖檔的寬度+間距） * 索引 值+間距大小）】，并修改目前索引的高度為目前元素高度。

1. 　　當頁面加載完成，或頁面寬度發生變化時，調用函數。