来源：CSDN

原文：https://blog.csdn.net/qq_38187437/article/details/84673612

版权声明：本文为博主原创文章，转载请附上博文链接！

jsp滚动实现图片也滚动条纯css实现图片瀑布流结构 Vue.js

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

水平有限，仅供参考。

---------------------