首页 > 代码库 > 简单实现加载图片的瀑布流效果
简单实现加载图片的瀑布流效果
代码很简单，没有注释
<style type="text/css"> *{ margin:0px; padding:0px; } #container{ position:relative; } .box{ padding:5px; float:left; } .box_img{ padding:5px; border:1px solid #CCC; box-shadow:0 0 5px #CCC; border-radius:5px; } .box_img img{ width:150px; height:auto; } </style> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img alt="" src="img/1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/4.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/5.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/4.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/5.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/4.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/5.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/4.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img alt="" src="img/5.jpg"> </div> </div> </div> <script type="text/javascript"> window.onload = function(){ imgLocation("container","box"); var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"1.jpg"},{"src":"2.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){ //将parent下所有的content全部取出 var cparent = document.getElementById(parent); var ccontent = getChildElement(cparent,content); var imgWidth = ccontent[0].offsetWidth; var num = Math.floor(document.documentElement.clientWidth/imgWidth); cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto"; var boxHeightArr = []; for(var i=0;i<ccontent.length;i++){ if(i<num){ boxHeightArr[i] = ccontent[i].offsetHeight; }else{ 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; } } } function getMinHeightLocation(boxHeightArr,minHeight){ for(var i in boxHeightArr){ if(boxHeightArr[i] == minHeight){ return i; } } } 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>
简单实现加载图片的瀑布流效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。