js瀑布流

来源：互联网发布：java二次开发有前途么编辑：程序博客网时间：2024/05/21 05:21

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="base.css" /><script type="text/javascript" src="jquery-1.11.0.js" ></script><script>$(function(){ var cols = $(".col");$(window).scroll(function(){//滚动条距顶部距离var top = $(window).scrollTop();//当前浏览器高度var height = $(window).height();//文档高度var wHeight = $(document).height();var flag = top + height == wHeight;if(flag){$.ajax({type:"get",url:"data.json",async:true,success:function(data){addImg(data)},error:function(mes){alert(1)}});}})//给每一列增加图片function addImg(arr) {//console.log(arr);for (var i = 0; i < arr.datas.length; i++) {//alert(arr.datas.length);var box = $('<div class = "box"></div>');//$(box).addClass("box");$(box).html('<img src="images/'+arr.datas[i]+'"  />');var col = getMinHeight(cols);$(col).append(box);}}/*   高度最小的列dom对象*/function getMinHeight(cols) {//console.log(cols);var min = cols[0]; //高度最小的列dom对象for (var i = 0; i < cols.length; i++) {if (min.offsetHeight > cols[i].offsetHeight) {min = cols[i];}}return min;}})</script></head><body><div id="container"><div class="col"><div class="box"><img src="images/0.jpg" /></div><div class="box"><img src="images/4.jpg" /></div><div class="box"><img src="images/5.jpg" /></div></div><div class="col"><div class="box"><img src="images/1.jpg" /></div><div class="box"><img src="images/4.jpg" /></div><div class="box"><img src="images/6.jpg" /></div></div><div class="col"><div class="box"><img src="images/2.jpg" /></div><div class="box"><img src="images/0.jpg" /></div></div><div class="col"><div class="box"><img src="images/3.jpg" /></div><div class="box"><img src="images/8.jpg" /></div><div class="box"><img src="images/9.jpg" /></div></div></div></body></html>

其中data.json是自己模拟的数据{"datas":["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"]}

1 0