第一種方法其實(shí)是最合適的，也是對(duì)開(kāi)發(fā)人員要求最高的，即使有思路與算法在開(kāi)發(fā)過(guò)程中也會(huì)踩很多坑，比如1圖片預(yù)加載，2querySelector取元素居然獲取不到，3使用boxsizing簡(jiǎn)化計(jì)算過(guò)程降低復(fù)雜性，等等 box。

* Safari and Chrome *columnrule3px outset #ff0000實(shí)例lt！DOCTYPE html CSS3瀑布流 *大層* containerwidth80%margin 0 auto *瀑布流層* waterfall mozcolumncount4 * Firef。

同時(shí)，通過(guò)設(shè)置 justifycontent 屬性為 spacebetween，使子元素之間在容器內(nèi)均勻分布在子元素item中，通過(guò)設(shè)置 flex 屬性和寬度等樣式，可以實(shí)現(xiàn)不同寬度的子元素在容器內(nèi)自適應(yīng)布局需要注意的是，前端瀑布流布局的。

瀑布流布局實(shí)現(xiàn)的方法很多，具體可以自行百度，此處不再贅述本文中瀑布流實(shí)現(xiàn)方法為四列布局li*4，每個(gè)圖片為一個(gè)盒子pimg+p，從后臺(tái)讀取數(shù)據(jù)后賦值給盒子中的元素，判定此時(shí)高度最小的列l(wèi)i，然后將盒子。

但是今天我們的瀑布流可不是一般的瀑布流讓我們接著看自動(dòng)排版我們的要求是做那種隨機(jī)凌亂的感覺(jué)，所以我們需要做一種機(jī)制，來(lái)將圖片選擇最優(yōu)的一種排列方式來(lái)展示到頁(yè)面上，也就是保證圖片與相鄰圖片的比例是最合適的然后。

瀑布流布局思路 首先確定列數(shù)，每次將新增的DOM結(jié)構(gòu)添加到當(dāng)前高度最矮的一列，以此類推，形成一種參差不齊的差異化布局形式滾動(dòng)偏移場(chǎng)景1 當(dāng)元素內(nèi)容超出元素大小，并且元素設(shè)置了overflow，可以使元素出現(xiàn)滾動(dòng)條，通過(guò)。

WaterLayout 實(shí)現(xiàn)瀑布流的使用的關(guān)鍵類是 UICollectionViewFlowLayout，如果我們不繼承直接使用的話，系統(tǒng)已經(jīng)幫我們實(shí)現(xiàn)了一些效果，比如橫向或者豎向滑動(dòng)，然后配置一些屬性或者遵循UICollectionViewDelegateFlowLayout，來(lái)顯示個(gè)性化的效。

isFitWidth 自適應(yīng)瀏覽器寬度Boolean isResizableL 是否可調(diào)整大小 Boolean isRTL 使用從右到左的布局 Boolean 2jqueryinfinitescroll，有了瀑布流布局，我們還需要一個(gè)動(dòng)態(tài)加載的功能，也就是瀏覽器滾動(dòng)條滾動(dòng)到底。

那么接下來(lái)就基于這個(gè)特點(diǎn)開(kāi)始瀑布流探索之旅基礎(chǔ)功能實(shí)現(xiàn)首先我們定義好一個(gè)有 20 張圖片的容器， #waterfall position relative waterfallbox float left width 200px。

首先，css3的布局主要用到下面三個(gè)屬性 columncount columngap columnrule 其次，在兼容column的瀏覽器中可以實(shí)現(xiàn)瀑布流，代碼如下 demo width 500px height auto webkitcolumncount3 mozco。

今天抽空再寫一篇，寫個(gè)瀑布流的效果做過(guò)iOS的都知道瀑布流在iOS中也是個(gè)很流行的布局方式，這里就不再多介紹了我們來(lái)看看如何用JS來(lái)實(shí)現(xiàn)瀑布流的效果我就直接上代碼了，里面的注釋都很清晰不懂的可以來(lái)問(wèn)我htm。

這種瀑布流實(shí)現(xiàn)大體有兩種方式，一種就是js的方式，一種是css，相對(duì)于js來(lái)說(shuō)css的控制不是很好，不能自動(dòng)加載之類的，只能顯示一個(gè)瀑布流效果，大體的思路就是一個(gè)div里面放兩個(gè)div分別浮動(dòng)，高度自動(dòng)，然后將圖片分別放置。

其實(shí)這種jquery的插件真的比較多，百度下就有很多結(jié)合兩個(gè)jquery插件jquery瀑布流插件blocksit和圖片延遲加載插件jquerylazyload可以實(shí)現(xiàn)向百度首頁(yè)那種延遲加載的瀑布流樣式而且代碼也比較簡(jiǎn)單function quotimglazyquot。

可以實(shí)現(xiàn)，用擴(kuò)展組件特殊功能容器瀑布流容器來(lái)做建議先在文檔中心搜一下文檔說(shuō)明看看，或看課程iVX入門課程零基礎(chǔ)快速掌握可視化全棧開(kāi)發(fā)擴(kuò)展組件介紹瀑布流容器和瀑布流卡片一節(jié)教程。

Weex是一個(gè)可以利用web 前端開(kāi)發(fā)技術(shù)來(lái)實(shí)現(xiàn)Androidios 原生引用的框架，使用 Vue 作為上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API1組件是提供瀑布流布局的核心組件瀑布流，又稱瀑布流式布局是比較。