【汇智学堂】纯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+"/";
%>



	
	

	









    <-- 这里是使用c标签循环一个图片列表，假设后台数据已经写好 -->
	

		
			
				

				
			
		
	

水平有限，仅供参考。