使用原生js实现瀑布式加载图片

本文主要是介绍使用原生js实现瀑布式加载图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、首先设置好容器，每张图片的宽度设置为固定宽度，高度自适应

	<div id="main"><div  class="box"><img src="images/0.jpg" /></div>……………………</div>

2、根据电脑分辨率，每排显示的图片数量不同，然后根据图片数量计算出容器的宽度

	var oParent = document.getElementById(parent);var oKids = getKidsByClassName(parent,clsName);var okW = oKids[0].offsetWidth+15; //每一个子元素所占的宽度var num = Math.floor(document.documentElement.clientWidth/okW);//屏幕最多能放多少列var mainW = okW*num;oParent.style.cssText = "width:"+mainW+"px;margin:0 auto"; //让整个容器居中

3、将容器看成几个列组成，将第一排的列的高度存储在hArr数组中，之后每一个元素都要查找hArr中最低列放置，并修改列的值

	var hArr = [];for(var i = 0; i<oKids.length;i++){if(i<num){hArr.push(oKids[i].offsetHeight+15); //把第一排的列高放进去}else{var minH = Math.min.apply(null,hArr); //找出一列中列高最小的 下一个元素就放在这一列var minIndex = hArr.indexOf(minH);var left = (oKids[i].offsetWidth+15)*minIndex;oKids[i].style.cssText = "position:absolute;top:"+minH+"px;left:"+left+"px;"; //将元素设置成绝对定位，设置top left值hArr.splice(minIndex,1,minH+oKids[i].offsetHeight+15); //修改列高}}

4、实现图片动态加载，通过监听滚动事件，当最高列的最后一个元素露出一半高度时动态加载图片

function checkHeight(){var oParent = document.getElementById("main");var oKids = getKidsByClassName("main","box");var lastKid = oKids[oKids.length-1];var lastH = lastKid.offsetTop+Math.floor(lastKid.offsetHeight/2);//最后一个元素漏出一半高度var scrollH =document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 滚动的高度var screeH = document.body.clientHeight || document.documentElement.clientHeight;//页面高度return lastKid < scrollH+screeH; //当最后一个元素露出一半时 开始加载其他元素}

	window.onscroll = function(){if(checkHeight){//当最后一个元素露出一半时 开始加载其他元素var oParent = document.getElementById("main");for(var i = 0;i<dataInt.data.length;i++){var oDiv = document.createElement("div");oDiv.className = "box";oParent.appendChild(oDiv);var oImg = document.createElement("img");oImg.src = "images/"+dataInt.data[i].src;oDiv.appendChild(oImg);}waterfall("main","box"); //调整格式}}

实现效果（第一次录屏，所以录得不好0~0）

效果图