<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> *{padding: 0;margin:0;} #main{ position:relative; margin:0 auto;} .pin{ padding:15px 0 0 15px; float:left;} .box{ padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc; } .box img{ 162px; height:auto;} </style> <script> window.onload=function(){ show('main','pin'); //模拟后台数据 var dataInt={'data':[{'src':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'}]}; window.onscroll=function(){ if(check){ var op = document.getElementById('main'); //父盒子 //将数据渲染到页面底部 for(var i=0;i<dataInt.data.length; i++){ //创建divA var divA = document.createElement('div'); divA.className = 'pin'; op.appendChild(divA); //创建divB var divB = document.createElement('div'); divB.className = 'box'; divA.appendChild(divB); //创建IMG var oimg = document.createElement('img'); oimg.src = 'images/'+dataInt.data[i].src; divB.appendChild(oimg); } show('main','pin'); } }; } function show(parent,box){ var op = document.getElementById(parent); //父盒子 var clas = getByClass(op,'pin'); //返回class 数组 var obox = clas[0].offsetWidth; //获取一个盒子的宽度 var cols = Math.floor((document.documentElement.clientWidth||document.body.clientWidth)/obox); var boxHeight = []; //第一排图片高度 的数组 op.style.cssText = ''+obox*cols+'px'; //设置 op 宽度; for(var j=0; j<clas.length; j++){ if(j<cols){ //判断的第一排图片 boxHeight.push(clas[j].offsetHeight); //将高度放在数组 }else{ var minH = Math.min.apply(null,boxHeight); //获取boxHeight数组中最小的值 var index = geiminIndex(boxHeight,minH); //获取boxHeight最小值的索引 clas[j].style.position = 'absolute'; clas[j].style.top = minH + 'px'; clas[j].style.left = clas[index].offsetLeft +'px'; boxHeight[index] += clas[j].offsetHeight; // } } //alert(op.offsetWidth); //console.log(boxHeight) //console.log(minH) } function geiminIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } }; function getByClass(parent,cla){ var els = []; var tots = parent.getElementsByTagName('*'); for(var i=0; i<tots.length; i++){ if(tots[i].className==cla){ els.push(tots[i]); } } return els; }; //加载图片的条件 function check(){ var op = document.getElementById('main'); //父盒子 var clas = getByClass(op,'pin'); //返回class 数组 //页面最后的一个盒子,距离顶部的距离 var last = clas[clas.length-1].offsetTop+Math.floor(clas[clas.length-1].offsetHeight/2); //滚动距离加窗口的高度 var scrollTop = (document.documentElement.clientHeight || document.body.clientHeight) + (document.documentElement.scrollTop || document.body.scrollTop) return last < scrollTop ? true : false; } </script> </head> <body> <div id="main"> <div class="pin"> <div class="box"> <img src="./images/1.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/2.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/3.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/4.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/5.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/6.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/7.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/8.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/9.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/10.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/11.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/12.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/13.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/14.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/15.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/16.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/17.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/18.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/19.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/20.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/21.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/20.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/21.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/20.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/21.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/20.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/21.jpg"/> </div> </div> </div> </body> </html>
javascript方法:原生js实现方法 存在bug