<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/head和content.css" />
</head>
<body>
<div class="head">
<div class="wrapper">
<p>❅❅❅❅❅作 品 展 示❅❅❅❅❅</p>
</div>
</div>
<div class="jq22-container">
<div id="div1">
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.waterfall.js"></script>
<script>
$("#div1").waterfall({
itemClass: ".box",
minColCount: 2,//最小数量
spacingHeight: 10,//图片之间的间距
resizeable: true,//是否可以自适应
ajaxCallback: function(success, end) {
var data = {"data": [
{ "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "2.jpeg" }, { "src": "5.jpg" }, { "src": "7.jpg" }, { "src": "6.jpg" }
]};
var str = "";
var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>'
for(var i = 0; i < data.data.length; i++) {
str += templ.replace("{{src}}", data.data[i].src);
}
$(str).appendTo($("#div1"));
success();
end();
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/head和content.css" />
</head>
<body>
<div class="head">
<div class="wrapper">
<p>❅❅❅❅❅作 品 展 示❅❅❅❅❅</p>
</div>
</div>
<div class="jq22-container">
<div id="div1">
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
<div class="box"><img src="img/2.jpeg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
<div class="box"><img src="img/11.jpg" alt=""></div>
<div class="box"><img src="img/12.jpg" alt=""></div>
<div class="box"><img src="img/13.jpg" alt=""></div>
<div class="box"><img src="img/14.jpg" alt=""></div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.waterfall.js"></script>
<script>
$("#div1").waterfall({
itemClass: ".box",
minColCount: 2,//最小数量
spacingHeight: 10,//图片之间的间距
resizeable: true,//是否可以自适应
ajaxCallback: function(success, end) {
var data = {"data": [
{ "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "2.jpeg" }, { "src": "5.jpg" }, { "src": "7.jpg" }, { "src": "6.jpg" }
]};
var str = "";
var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>'
for(var i = 0; i < data.data.length; i++) {
str += templ.replace("{{src}}", data.data[i].src);
}
$(str).appendTo($("#div1"));
success();
end();
}
});
</script>
</body>
</html>