<!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>