我的工具
我的开源<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美腿图库，冲！冲！冲</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
<link rel="stylesheet" type="text/css" th:href="@{/css/jquery.lightbox-0.5.css}" media="screen">
<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all"/>
<script type="text/javascript" th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lightbox-0.5.js}"></script>
<script type="text/javascript">
$(function() {
$('#div1 a').lightBox();
});
</script>
<style>
.jq22-container {
margin-top: 50px;
}
#div1 {
margin: auto;
position: relative;
}
.box {
float: left;
padding: 10px;
border: 1px solid #ccc;
background: #f7f7f7;
box-shadow: 0 0 8px #ccc;
}
.box:hover {
box-shadow: 0 0 10px #999;
}
.box img {
width: 240px;
}
</style>
</head>
<body>
<div class="jq22-container">
<div class="jq22-content bgcolor-3">
<div id="div1" style="height: 2669px;">
</div>
</div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script th:src="@{/js/jquery.waterfall.js}"></script>
<script th:inline="javascript">
//一般直接写在一个js文件中
layui.use(['form', 'layedit', 'laydate','layer','flow'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,flow = layui.flow
,laydate = layui.laydate;
//按屏加载图片
flow.lazyimg({
elem: '#LAY_demo3 img'
});
});
</script>
<script th:inline="javascript">
var start = '';
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url:/*[[@{/threefloor/images/frist}]]*/ ,
success: function (res) {
if (res.success) {
start = res.data.start;
var strs= new Array();
var str2 = "";
strs=res.data.imgurl.split(","); //字符分割
for(var i = 0; i < strs.length; i++) {
str2 += '<a href=' + strs[i] + ' title="测试图片"><div class="box" id="LAY_demo3"><img src=' + strs[i] + ' alt=""></div></a>';
}
jQuery(str2).appendTo(jQuery("#div1"));
jQuery('#div1 a').lightBox();
}
},
error : function() {
layer.msg("异常！");
}
});
$("#div1").waterfall({
itemClass: ".box",
minColCount: 2,
spacingHeight: 10,
resizeable: true,
ajaxCallback: function(success, end) {
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url:'/threefloor/images/more?start='+start,
success: function (res) {
if (res.success) {
start = res.data.start;
var strs= new Array();
var str2 = "";
strs=res.data.imgurl.split(","); //字符分割
for(var i = 0; i < strs.length; i++) {
str2 += '<a href=' + strs[i] + ' title="测试图片"><div class="box" id="LAY_demo3"><img src=' + strs[i] + ' alt=""></div></a>';
}
jQuery(str2).appendTo(jQuery("#div1"));
jQuery('#div1 a').lightBox();
success();
end();
}
},
error : function() {
layer.msg("异常！");
}
});
}
});
</script>
</html>
标题：瀑布流插件jquery.waterfall.js 的使用
作者：zhaojishun
地址：http://blog.zhaojishun.cn/articles/2019/10/07/1570414124440.html