<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
.nav{
width: 100%;
height: 120px;
background-color:#0D4A74;
overflow: hidden;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
#wrap {
position: relative;
width: auto;
top: 100px;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 300px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 100%;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<iframe src="nav.html" frameborder="0" width="100%" height="140px"></iframe>
</div>
<div id="wrap">
<div >
<img src="imgs/1.jpg" οnclick="window.open('detail.html?id=1')">
<a href="">梦幻图片一</a>
</div>
<div>
<img src="imgs/2.jpg" οnclick="window.open('detail.html?id=2')">
<a href="">幻图片二</a>
</div>
<div>
<img src="imgs/3.jpg" οnclick="window.open('detail.html?id=3')">
<a href="">幻图片三</a>
</div>
<div>
<img src="imgs/4.jpg" οnclick="window.open('detail.html?id=4')">
<a href="">幻图片四</a>
</div>
<div>
<img src="imgs/5.jpg"height="160" οnclick="window.open('detail.html?id=5')">
<a href="">幻图片五</a>
</div>
<div>
<img src="imgs/6.jpg" height="135" οnclick="window.open('detail.html?id=6')">
<a href="">幻图片六</a>
</div>
<div>
<img src="imgs/7.jpg" height="145" οnclick="window.open('detail.html?id=7')">
<a href="">幻图片七</a>
</div>
<div>
<img src="imgs/8.jpg" height="160" οnclick="window.open('detail.html?id=8')">
<a href="">盈幻图片八</a>
</div>
<div>
<img src="imgs/9.jpg" height="180" οnclick="window.open('detail.html?id=9')">
<a href="">幻图片九</a>
</div>
<div>
<img src="imgs/10.jpg" height="105" οnclick="window.open('detail.html?id=10')">
<a href="">幻图片十</a>
</div>
<div>
<img src="imgs/11.jpg" height="195" οnclick="window.open('detail.html?id=11')">
<a href="">幻图片十一</a>
</div>
<div>
<img src="imgs/12.jpg" height="175" οnclick="window.open('detail.html?id=12')">
<a href="">幻图片十二</a>
</div>
<div>
<img src="imgs/6.jpg" height="145" οnclick="window.open('detail.html?id=13')">
<a href="">幻图片一</a>
</div>
</div>
<a href="" id="fre"></a>
<!--<iframe src="footer.html" frameborder="0" width="100%" height="750px" id="btm"></iframe>-->
<script>
$(function () {
setTimeout(function () {
$("#fre").click(function () {
})
},1)
})
var data = [
{
"src": "imgs/1.jpg",
"title": "梦幻图片1",
"ysId": 1
}, {
"src": "imgs/2.jpg",
"title": "梦幻图片5",
"ysId": 2
}, {
"src": "imgs/3.jpg",
"title": "梦幻图片5",
"ysId": 3
}, {
"src": "imgs/4.jpg",
"title": "梦幻图片5",
"ysId": 4
},
{
"src": "imgs/5.jpg",
"title": "梦幻图片5",
"ysId": 5
}, {
"src": "imgs/6.jpg",
"title": "梦幻图片5",
"ysId": 6
},
{
"src": "imgs/7.jpg",
"title": "梦幻图片5",
"ysId": 7
}, {
"src": "imgs/8.jpg",
"title": "梦幻图片5",
"ysId": 8
},
{
"src": "imgs/9.jpg",
"title": "梦幻图片5",
"ysId": 9
}, {
"src": "imgs/10.jpg",
"title": "梦幻图片5",
"ysId": 10
},
{
"src": "imgs/11.jpg",
"title": "梦幻图片5",
"ysId": 11
}, {
"src": "imgs/12.jpg",
"title": "梦幻图片5",
"ysId": 12
},
];
var waterfall = function(wrap, boxes) {
// 获取屏幕可以显示的列数
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 设置容器的宽度
wrap.width(boxWidth * colsNumber);
// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
//获取最小列的高度
var minHeight = Math.min.apply(null, everyHeight);
//获取最小列的索引
var minIndex = getIndex(minHeight, everyHeight);
//设置盒子样式
setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);
//更新最小列的高度
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
//鼠标经过呈现半透明的交互效果
boxes.eq(i).hover(function(event) {
$(this).stop().animate({
'opacity': '0.5'
}, 500);
}, function(event) {
$(this).stop().animate({
'opacity': '1'
}, 500);
})
}
};
//获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
//设置追加盒子样式
var getStartNumber = 0;
var setStyle = function(box, top, left, index) {
if (getStartNumber >= index) {
return false;
};
box.css({
'position': 'absolute',
'top': top,
'left': left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000)
getStartNumber = index;
}
//数据请求检验
var getCheck = function(wrap) {
//获取文档高度
var documentHeight = $(window).height();
//获取文档向上滚动的高度
var scrollHeight = $(window).scrollTop();
//获取最后一个盒子所在列的总高度
var boxes = wrap.children('div');
var lastBoxTop = boxes.eq(boxes.length - 1).offset().top;
var lastHeight = boxes.eq(boxes.length - 1).height() + 20;
var lastColHeight = lastBoxTop + lastHeight;
// console.log(lastColHeight + 9)
return documentHeight + scrollHeight >= lastColHeight ? true : false;
};
var Data=$.ajax({
type: "get",
url: "josn/josn1.js",
processData: false,
async: false
}).responseText;
abc = JSON.parse(Data.split('=')[1])
var appendBox = function(wrap) {
if (getCheck(wrap)) {
for (var i in data) {
var innerString = '<div οnclick="window.open(\'detail.html?id='+data[i].ysId+'\')"><img src="' + data[i].src + '"><a href="">' + data[i].title + '</a></div>';
wrap.append(innerString);
};
} else {
return false;
};
waterfall(wrap, wrap.children('div'));
}
$(document).ready(function(event) {
//获取容器与盒子
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
//加载盒子
waterfall(wrap, boxes);
//滚动事件
$(this).scroll(function(event) {
appendBox(wrap, boxes);
})
});
</script>
</body>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
