整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
先,我們來看一下什么是瀑布流布局效果,比如電商網站 蘑菇街
原理圖:
在一個大盒子里，放置多個小盒子，小盒子的大小可以不一致，長短不一樣，呈現一種瀑布流的效果。
使用CSS3S實現只需要如下4步:
1. 準備圖片素材
2. 書寫相應HTML結構
3. 了解CSS 多欄(Multi-column) 屬性
4. 使用CSS 多欄屬性完成瀑布流布局
布流布局出來好多年了，剛出來時，一般都采用js來實現，涌現了很多比較好的js插件，例如：masonry.js、gridify.js等等。這里就不再詳說如何使用了，網上都能找到。今天討論的是純CSS實現瀑布流布局。
這種布局方法非常簡單，就是將多個列表橫向排列，每個列表擁有的項都差不多。圖片寬度固定，高度自動撐起來。
html：
<div class="wrap"> <ul class="waterfall"> <li class="item"><img src="image/1.jpg"></li> <li class="item"><img src="image/3.jpg"></li> <li class="item"><img src="image/5.jpg"></li> <li class="item"><img src="image/7.jpg"></li> <li class="item"><img src="image/9.jpg"></li> </ul> <ul class="waterfall"> <li class="item"><img src="image/2.jpg"></li> <li class="item"><img src="image/4.jpg"></li> <li class="item"><img src="image/6.jpg"></li> <li class="item"><img src="image/8.jpg"></li> <li class="item"><img src="image/10.jpg"></li> </ul> </div>
css:
.wrap{
display:flex;
justify-content: space-between;
}
.waterfall{
width:50%;
}
.waterfall .item img{
width:100%;
}
注：
1、waterfall也可以浮動，wrap清除浮動，只要兩個列表在一行就行。
2、每一塊 item 都是從上往下排列的，并不能實現從左往右，解決辦法是：在獲取數據時，需要將數據按奇偶進行分類顯示(假設顯示兩列，多列同理)。您可以定義兩個數組：listEven和listOdd，分別來接受獲取的數據的偶數項和奇數項，然后分別進行渲染。這里用VUE來演示：
//假設res.data為ajax請求到的數據
res.data.map(function(item,index){
index%2===0 ? that.listEven.push(item) : that.listOdd.push(item);
})
<div class="wrap"> <ul class="waterfall"> <li class="item" v-for="(item,index) in listEven" :key="'even'+index"><img :src="item"></li> </ul> <ul class="waterfall"> <li class="item" v-for="(item,index) in listOdd" :key="'odd'+index"><img :src="item"></li> </ul> </div>
3、這種布局方法，會有一個問題，如果item高度左右列相差很大，就會顯示有問題，如下圖，解決辦法給item一個max-height，超過圖片這個max-height就隱藏，此外，后臺在傳圖片時做裁切更好：
css 瀑布流
CSS3 column多列可以非常輕松的實現瀑布流效果，它會自動將列表項分配到根據設置的列數當中去，先看下它的常用屬性：
html
<ul class="waterfall"> <li class="item"><img src="1.jpg"></li> <li class="item"><img src="2.jpg"></li> <li class="item"><img src="3.jpg"></li> <li class="item"><img src="4.jpg"></li> <li class="item"><img src="5.jpg"></li> <li class="item"><img src="6.jpg"></li> <li class="item"><img src="7.jpg"></li> <li class="item"><img src="8.jpg"></li> <li class="item"><img src="9.jpg"></li> <li class="item"><img src="10.jpg"></li> </ul>
css
.waterfall{
column-count:2;
}
.waterfall .item{
break-inside: avoid;
}
效果如下：
css3瀑布流布局
注：
1、每一塊 item 都是從上往下排列的，并不能實現從左往右，第一種方法采用了奇偶兩個數組解決了，這個不好解決，如果帶有上拉加載，不確定總個數，就更不好解決了。
2、item的上下間距盡量不要用margin，否則可能會出現下面這種情況，這是因為左列最后一個margin跑到右邊上面去了，改成padding即可，因為padding屬于item的內容，而break-inside: avoid則禁止item折斷：
css3瀑布流布局
CSS3的flex用法很多。大多數情況都是用來橫排，將塊狀容器顯示在一行，還有就是用來對其一行。但是，改變flex-direction就可以做到縱向排列。
html
<ul class="waterfall"> <li class="item"><img src="1.jpg"></li> <li class="item"><img src="2.jpg"></li> <li class="item"><img src="3.jpg"></li> <li class="item"><img src="4.jpg"></li> <li class="item"><img src="5.jpg"></li> <li class="item"><img src="6.jpg"></li> <li class="item"><img src="7.jpg"></li> <li class="item"><img src="8.jpg"></li> <li class="item"><img src="9.jpg"></li> <li class="item"><img src="10.jpg"></li> </ul>
css
.waterfall{
/*flex-box*/
display: flex;
/*縱向排列*/
flex-direction: column;
/*換列*/
flex-wrap: wrap;
height: 100vh;
}
.waterfall .item{
width:50%;
}
注：
1、flex-wrap: wrap 是為了讓item撐滿waterfall的時候換列（可以理解為換行）
2、這里waterfall的height一定要寫，否則，waterfall隨著內容變多，不斷撐高也不會換列。
3、waterfall的height要隨著item的數量變化而變化，否則，一列顯示不了就顯示兩列，兩列顯示不了就顯示三列，為了維持固定的列數，只能不斷升高waterfall的高度。
4、flex-direction: column和flex-wrap: wrap可以合并為flex-flow: column wrap;
5、與前面兩種方法一樣，這種方法仍然是不好解決從上往下排列而非從左往右排列的問題。
總結：純CSS實現瀑布流，總有這樣或那樣的問題，最終還是要通過js來控制。如果對排序沒有要求的話，第二種方法還是比較好用的。純css實現瀑布流，大家還有什么好的方法，歡迎留言評論。關注IT學堂，會有更多驚喜哦！
者：十三億少女的夢
來源：CSDN
原文：https://blog.csdn.net/qq_38187437/article/details/84673612
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。
在css中，早已實現了瀑布流布局，這里用css做的一個瀑布流案例。廢話不多說，直接上代碼。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流模型</title>
<style type="text/css">
.masonry {
-moz-column-count:3; /* 火狐 */
-webkit-column-count:3; /* Safari 和 谷歌 */
column-count:3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
width: 80%;
margin:1em auto;
}
.item {
padding: 1em;
margin-bottom: 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #b5ffa1;
}
//適應屏幕
@media screen and (max-width: 800px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
@media screen and (max-width: 500px) {
.masonry {
column-count: 1; // two columns on larger phones
}
}
</style>
</head>
<body>
<-- 這里是使用c標簽循環一個圖片列表，假設后臺數據已經寫好 -->
<div class="masonry">
<c:forEach items="${imgList}" var="other">
<c:if test="${other !=null and other !='' }">
<div class="item"><img style="width: 100%" src="${other}"/>
</div>
</c:if>
</c:forEach>
</div>
</div>
</body>
</html>
水平有限，僅供參考。
---------------------
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
