在網(wǎng)頁中實現(xiàn)瀑布流效果方法1傳統(tǒng)多列浮動 各列固定寬度，并且左浮動一列中的數(shù)據(jù)塊為一組，列中的每個數(shù)據(jù)塊依次排列即可更多數(shù)據(jù)加載時，需要分別插入到不同的列上2 CSS3 定義 由 chromeff 瀏覽器直接渲染。

1該效果使用CSS3的columnwidth實現(xiàn)，和js版的瀑布流不同圖片將縱向排列2代碼中使用了一小段JS，和瀑布流效果無關，主要用來動態(tài)插入元素，并實現(xiàn)模擬翻頁 舉例說明 如圖。

最經(jīng)典的兩列自適應高度CSS代碼，IE567，F(xiàn)F下測試通過希望對你有用 body padding 0 margin 0 color#333*#0d7206* fontsize 147px fontfamily Arial， Helvetica， sansserif line。

function$ var 參數(shù) setting= column_width204，列寬 column_className#39waterfall_column#39，列的類名 column_space10，列間距 cell_selector#39cell#39，要排列的磚塊的選擇器，限定在瀑布流的容器內。

一種網(wǎng)頁展示效果，每行有多個區(qū)塊或圖片，這些區(qū)塊或圖片不在一個水平線上對齊，然后重復重復再重復這個叫瀑布流布局，不應該叫css瀑布流，因為純css實現(xiàn)的瀏覽器支持不好，基本上都是有JS的問題三手機瀑布流是。

這種排版方式叫做瀑布流 一般都是靠js來控制的，純css的不好寫 現(xiàn)在瀑布流的js插件很多，谷歌 瀑布流插件 源碼一把一把的 純手打，希望幫到你。

ul里面的瀑布流內容是浮動的嗎如果是，用清除浮動的方法來然包裹它的盒子向下延伸如果是絕對定位的，恐怕要用js來計算它的高度。

瀑布流布局 斂身幽谷遠塵埃，天光云影任徘徊不須天風來相催，自在花兒靜靜開 oTwo TAG 斂身幽谷遠塵埃，天光云影任徘徊不須天風來相。

columnrule 其次，在兼容column的瀏覽器中可以實現(xiàn)瀑布流，代碼如下 demo width 500px height auto webkitcolumncount3 mozcolumncount3 columncount3 webkitcolumngap10px。