js实现图片瀑布流布局

来源：互联网发布：net.cn域名是什么域名编辑：程序博客网时间：2024/04/30 04:00
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>js实现瀑布流</title><style type="text/css">body{margin:0px;padding:0px;}*{margin:0px;padding:0px;}#container{width:900px;height:auto;margin:30px auto 0 auto;position:relative;}.box{padding:5px;float:left;margin-bottom:5px;}.box_img{padding:5px;border:1px solid #ccc;box-shadow:0 0 5px #ccc;border-radius:5px;}.box_img img{width:155px;height:auto;}</style></head><body><div id="container"><div class="box"><div class="box_img"><img src="img/8.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/9.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/2.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/3.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/7.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/1.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/4.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/5.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/6.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/2.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/3.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/8.jpg"/></div></div><div class="box"><div class="box_img"><img src="img/1.jpg"/></div></div></div><script>//网页加载执行方法window.onload = function(){//imgLocation("container","box");var imgData={"data":[{"src":"2.jpg"},{"src":"9.jpg"},{"src":"1.jpg"},{"src":"10.jpg"},{"src":"5.jpg"},{"src":"2.jpg"},{"src":"9.jpg"},{"src":"1.jpg"}]};//滚动鼠标加载事件window.onscroll = function(){ if(checkFlag()){var cparent = document.getElementById("container");for(var i = 0;i<imgData.data.length;i++){var ccontent = document.createElement("div");ccontent.className = "box";cparent.appendChild(ccontent);var boximg = document.createElement("div");boximg.className = "box_img";ccontent.appendChild(boximg);var img = document.createElement("img");img.src = "img/"+imgData.data[i].src;boximg.appendChild(img);}imgLocation("container","box"); }}}//是否加载function checkFlag(){var cparent = document.getElementById("container");var ccontent = getChildElement(cparent,"box");//最后一张图片，距离顶部的高度var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;//滚动的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//页面的高度var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;if(lastContentHeight < scrollTop + pageHeight){return true;}}//获取图片个数，并且进行瀑布流function imgLocation(parent,content){var cparent = document.getElementById(parent);var ccontent = getChildElement(cparent,content);//宽度是一样的，任意取一个就行var imgWidth = ccontent[0].offsetWidth;//根据父元素的宽度，判断能够排放几个图片var num = Math.floor(cparent.offsetWidth / imgWidth);//var BoxHeightArr = [];for(var i = 0 ;i < ccontent.length;i++ ){if(i<num){//得到第一排的所有高度BoxHeightArr[i] = ccontent[i].offsetHeight;}else{//通过得到第一排de所有高度，使用函数，得到最小的一个var minHeight = Math.min.apply(null,BoxHeightArr);//得到最小的一个下表var minIndex = getminHeightLocation(BoxHeightArr,minHeight);ccontent[i].style.position = "absolute";ccontent[i].style.top = minHeight + "px";ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";//更新最小的高度BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;}}}//根据最小box的高度，找出次box在数组中的下表function getminHeightLocation(BoxHeightArr,minHeight){for(var i in BoxHeightArr){if(BoxHeightArr[i] == minHeight){return i;}}}//根据标签的class名称为 content 进行筛选放入到 contentArr 数组中 最后将其返回function getChildElement(parent,content){var contentArr = [];var allcontent = parent.getElementsByTagName("*");for(var i=0;i<allcontent.length;i++){if(allcontent[i].className==content){contentArr.push(allcontent[i]);}}return contentArr;}</script></body></html>
0 0