作者：十三亿少女的梦
来源：CSDN
原文：
版权声明：本文为博主原创文章，转载请附上博文链接！
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
在css中，早已实现了瀑布流布局，这里用css做的一个瀑布流案例。废话不多说，直接上代码。
<%@ page language=” java ” import=”java.util.*” pageEncoding=”utf-8″%>
<%@ taglib uri=”” 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>
水平有限，仅供参考。
———————
