Box">
Box_img">
Box">
Box_img">
Box_img">
rush:js;">
*{
margin: ;
padding:;
}
#content{
position: relative;
background-color: #;
}
.
Box{
padding: px;
float: left;
}
.
Box_img{
padding: px;
border: px solid #cccccc;
Box-shadow: px #cccccc;
border-radius: px;
}
img{
width: px;
height: auto;
}
Math.floor()函数能够向下取整。
Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。
window.onscroll=function(){};滑动页面的时候触发这个函数。
document.documentElement.clientHeight;浏览器显示出来的高度。
document.documentElement.scrollTop;滑动的距离。
rush:js;">
/**
* Created by asua on 2016/4/9.
*/
window.onload=function(){
imgLocation("content","
Box");
var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
window.onscroll=function(){
if(checkFlag()){
for(var i=0;i
Box=document.createElement("div");
Box.className="Box";
var cparent=document.getElementById("content");
cparent.appendChild(Box);
var Box_img=document.createElement("div");
Box_img.className="Box_img";
Box.appendChild(Box_img);
var img=document.createElement("img");
img.src="Img/"+lodeImage.Date[i].src;
Box_img.appendChild(img);
}
imgLocation("content","Box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("content");
var ccontent=getChildElement(cparent,"Box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
if(lastContentHeightsstext="width:"+imgwidth*cols+"px;margin:30px auto";
var heightArr=[];
for(var i=0;i
好了,关于js实现图片自动加载的瀑布流效果代码到此给大家介绍完了,希望对大家有所帮助!
原文地址:https://www.jb51.cc/js/49361.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。