瀑布流布局之前是一個需求，做了點調研，雖然現(xiàn)在暫時不做了，但想了想也還是記錄下來這個思路吧，同時鍛煉自己寫文章的能力。附上瀑布流

瀑布流布局之前是一個需求，做了點調研，雖然現(xiàn)在暫時不做了，但想了想也還是記錄下來這個思路吧，同時鍛煉自己寫文章的能力。

附上瀑布流小demo wangchunlei0000/waterfall-demo 能看到瀑布流的實現(xiàn)思路和方式，還能動態(tài)的改變列數(shù)

啥是瀑布流

啥是瀑布流呢？瀑布流是一種視圖方式，陳列的元素等寬不等高，參差不齊的排列方式，就下圖這種：

其實 css 的 flex 可以做到這種布局

<style>n .wrapper {n display: flex;n flex-flow: column wrap;n align-content: flex-start;n width: 80%;n height: 800px;n background-color: antiquewhite;n }n .wrapper .item {n width: 100px;n background-color: aqua;n margin: 0 20px 20px 0;nn }n </style>n <div class="wrapper">n <div class="item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas sunt enim fugit obcaecati suscipit facilis tempore dolores architecto eveniet aut.</div>n <div class="item">Rem minus dolorem velit architecto voluptas enim laudantium nam magni quod iste quam odio, minima sed nisi, alias omnis neque!</div>n <div class="item">Voluptas consequuntur sit quam optio animi, saepe accusantium, fugit architecto dolorum rem voluptatem laudantium? Sed natus ratione explicabo a maiores!</div>n <div class="item">Est, ad cum aliquid voluptas ea, modi reprehenderit officiis labore ipsum alias consequatur tenetur corporis explicabo dolorem sapiente, quisquam laborum.</div>n <div class="item">Excepturi iste sed hic. Sint veniam laborum corrupti unde, iure libero tempore temporibus laudantium! Repudiandae ipsum dolore veritatis facere explicabo!</div>n <div class="item">Ea eaque reprehenderit nesciunt officia architecto libero doloremque voluptas, veniam rem sit temporibus consequatur veritatis eius iste aperiam ratione ipsa!</div>n <div class="item">Magni quisquam nulla, ipsam assumenda quia labore soluta enim, dicta, reiciendis et cum totam! Facilis vero ipsam repellendus? Tempora, deleniti?</div>n <div class="item">Sequi in nesciunt deleniti natus eum eaque hic! Debitis dolorum placeat id, eius cumque amet maiores voluptatem labore quae quasi?</div>n <div class="item">Architecto ullam optio, aliquid molestiae aut numquam similique fugit natus ipsam in eos quisquam sed repellat distinctio quasi assumenda non!</div>n <div class="item">Deleniti necessitatibus fugiat ipsa porro natus illo odit, saepe nostrum officia commodi veritatis quam eum autem sit recusandae qui omnis?</div>n <div class="item">Placeat deserunt possimus necessitatibus dolore odio ipsum eum dolorum dolorem voluptates recusandae. Minima sequi voluptatem eligendi sunt officia excepturi tenetur.</div>n <div class="item">Iure porro tempora quidem eos ullam animi iusto odit atque ipsam harum! Commodi rem ab dolorem quam omnis quisquam maxime.</div>n </div>

那 css 就可以滿足瀑布流布局，那還調研啥呢？

上述代碼是利用 flex 布局縱向排列來達到瀑布流的布局，效果是從上至下排列元素，如下圖

可以看到元素的布局是從上至下依次排列的紅色數(shù)字 是元素代碼中的順序，但這并不是我想要的效果，想要實現(xiàn)的瀑布流是 從左至右排列的 像下圖這樣

以上面的實現(xiàn)為基礎，稍改思路，通過給每個 item 設置 order 來達到橫向排列的效果

為了能直觀的看出元素的排列順序，將每個item中的內容都寫成了數(shù)字

<style>n .test-wrapper {n height: 1000px;n text-align: center;n overflow-y: auto;n }n .wrapper {n display: flex;n flex-flow: column wrap;n height: 1500px;n background-color: antiquewhite;n margin: auto;n align-content: center;n }n .wrapper .item {n width: 100px;n background-color: aqua;n margin-bottom: 20px;n }n .split {n height:100%; n background-color: pink;n width: 15px;n }n </style>n <div class="test-wrapper">n <div class="wrapper">n <div class="item" style="height:100px; order:1">111</div>n <div class="item" style="height:180px; order:2">2222</div>n <div class="item" style="height:140px; order:3">3333</div>n <div class="item" style="height:100px; order:1">4444</div>n <div class="item" style="height:110px; order:2">555</div>n <div class="item" style="height:100px; order:3">6666</div>n <div class="item" style="height:150px; order:1">7777</div>n <div class="item" style="height:160px; order:2">888</div>n <div class="item" style="height:120px; order:3">999</div>n <div class="item" style="height:100px; order:1">1010</div>n <div class="item" style="height:100px; order:2">1111</div>n <div class="item" style="height:80px; order:3">121212</div>n <div class="split" style="order:1;"></div>n <div class="split" style="order:2;"></div>n </div>n </div>

利用 order 屬性來對元素排序，同時設置分隔每列 item 的元素（個數(shù)應為列數(shù) - 1），為清晰展示將分隔條設置成粉色。如果想要更靈活的使用瀑布流布局，可結合 js 來動態(tài)設置列數(shù)，包括縮放瀏覽器時自適應屏幕更改列數(shù)。