纯css实现图片瀑布流布局

先看一下效果图：

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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>

水平有限，仅供参考。

纯css实现图片瀑布流布局

猜你喜欢