一、什麼是瀑布流
像下面的圖中，1234這四個區域都是同乙個寬度的元素，並且佔據了一行的寬度。那麼第五塊元素想要插進頁面的時候，就選擇此時高度最小的第四列。依次類推。
所以，我們可以發現，這裡的問題主要有以下幾個
接下來我們一一解決上面提出來的問題。
首先，解決首行如何布局。
我們先用乙個大的盒子裝載所有的，並為其設定position為relative。
至於為什麼要設定position為relative，那是因為待會我們要設定的box需要設定position為absolute，而這個absolute的相對定位是相對於它最接近的設定了position（值為relative）的元素而定位的。
可以在這裡就設定寬度也可以待會在js中再設定寬度。取決於你。
#main
然後每乙個所在的區域我們用乙個box來包裹，在裡面新增和介紹文字。然後設定一下陰影，邊框什麼的。
首先要做的就是將除了第一行以外的元素設定偏移值，使他們偏移到合適的位置（高度最低的列）除此之外還要設定這個元素的position為absolute。因為只有absolute是不占用偏移值所在區間的空間位置。
所以我們需要獲取當前高度最小的是哪一列。
獲取到高度最小的是哪一列之後，將當前元素的top設定為這一列的高度，left為乙個box的寬度乘上當前列的索引值。
這樣，當前元素就去到了它該去的地方了。然後，將當前box的寬度新增到當前列的高度，那麼此時，這一列就有可能不再是高度最低的列了。
我們首先獲取到當前所有class為box的元素（自定義函式getelebycls）,然後，遍歷這些元素，當元素不在第一行的時候，就開始設定top和left的值。
不說了，直接看**。
function getelebycls(parent,clsname)
}return allcls;
}function wate***ll(parent,box)
#main
.box
.pic
.pic img
（下面是我16年的時候寫的呱呱呱）
簡單的設定了幾個div而已；下面的是全場的重點，也是整個js瀑布流設計的思想體現：
整個設計的思想就是先把第一行放好後，尋找到第一行高度最小的一張，將下一張放置在它的下面，然後將這兩張**的高度加起來繼續尋找下一張高度最小的，依次類推的放置好所有的；而每一行放置的數量就是螢幕的大小除以的寬度；
css隱藏的三種方法
1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不顯示，如 文字 鏈結 div層，是推薦的內容隱藏方式。style display none 我不占地兒，你看不見我 div 值 描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素，此元素前...
css隱藏div三種方法
1 display none 設定為display none 的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。2 visibility hidden 雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。3 opacity 0...
三種方法實現CSS三欄布局
本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...