1、
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定宽Jquery+AJAX+JSON瀑布流布局</title>
<style type="text/css">
body,ul,li,h3 {
margin: 0;
padding: 0;
list-style: none;
font: bold 12px "微软雅黑";
}
/*瀑布流布局样式*/
#lxf-box {
position: relative;
width: 1000px;
margin: 0 auto;
}
#lxf-box li {
background: #fff;
border: solid 1px #ccc;
text-align: center;
padding: 10px;
float: left;
}
h3 {
padding-top: 8px;
}
img {
width: 200px;
height: auto;
display: block;
border: 0
}
/*css3动画 注由于是css3制作的所以兼容性不保证 要想兼容性好 请自己做成gif动画加载图*/
/*li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/
#loading {
display: none;
line-height: 30px;
background: #000;
color: #fff;
text-align: center;
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
opacity: 0.8;
}
</style>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="lxf-box">
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/Baby-50.png"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
<li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
</ul>
<div id="loading">正在加载……</div>
<script>
/*
原理:1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
*/
function layoutBox() {
var wrap = document.getElementById("lxf-box")
var margin = 10;
var li = $("li");
//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,
//不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
var li_W = li[0].offsetWidth + margin;
var h = [];//记录区块高度的数组
li.css("position", "absolute");
var n = wrap.offsetWidth / li_W | 0;//容器的宽度除以区块宽度就是一行能放几个区块
for ( var i = 0; i < li.length; i++) {
var li_H = li[i].offsetHeight;
if (i < n) {//n是一行最多的li,所以小于n就是第一行了
h[i] = li_H;//把每个li放到数组里面
li.eq(i).css("top", 0);//第一行的Li的top值为0
li.eq(i).css("left", i * li_W);//第i个li的左坐标就是i*li的宽度
} else {
min_H = Math.min.apply(null, h);//取得数组中的最小值,区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H + margin;//加上新高度后更新高度值
li.eq(i).css("top", min_H + margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
li.eq(i).css("left", minKey * li_W); //第i个li的左坐标就是i*li的宽度
}
$("h3").eq(i).text("编号:" + i + ",高度:" + li_H);
$("li").animate({opacity : 1});
}
}
/* 返回数组中某一值的对应key */
function getarraykey(s, v) {
for (k in s) {
if (s[k] == v) {
return k;
}
}
}
window.onload = function() {
layoutBox();
};
window.onresize = function() {
layoutBox();
};
/**********************************************************************/
/*鼠标滚动到底部加载*/
var i = 1;
function getMore() {
$("#loading").show();
var path = "static/img.json";
$.getJSON(path,
function(obj) {
data = obj.datas;
$.each(
data,
function(j) {
var html = "<li style='opacity:1'><a href='#'><img src="+data[j].url+" ></a><h3>图片标题</h3></li>";
$("#lxf-box").append(html);
$("#loading").hide();
}
);
layoutBox();
i = 1;
}
);
};
/*绑定鼠标滚动事件*/
$(window).bind(
"scroll",
function() {
if ($(document).scrollTop() + $(window).height() > $(document).height() - 10
&& i == 1) {
i = 0;
getMore();
}
});
</script>
</body>
</html>
2、
{
"datas":[
{"url":"static/images/avatar_0.jpg"},
{"url":"static/images/Baby-50.png"},
{"url":"static/images/button2.png"},
{"url":"static/images/button4.png"},
{"url":"static/images/cloud_error.png"},
{"url":"static/images/Drug_Administration1.png"},
{"url":"static/images/errorico1.jpg"},
{"url":"static/images/errorico2.jpg"},
{"url":"static/images/head_admin.jpg"},
{"url":"static/images/login_bg3.png"}
]
}