《JavaScript实现图片自动加载的瀑布流效果_.docx》由会员分享，可在线阅读，更多相关《JavaScript实现图片自动加载的瀑布流效果_.docx（20页珍藏版）》请在三一文库上搜索。
1、JavaScript实现图片自动加载的瀑布流效果_ 这篇文章主要介绍了JavaScript实现图片自动加载的瀑布流效果的相关资料,需要的伴侣可以参考下 先给大家展现下效果图： 向下滑动网页的时候能够自动加载图片并显示。 盛放图片的盒子模型如下： div class=box div class=box_img img src=Img/8.jpg /div /div 设置img-width为150px，然后box_img添加内边距和阴影效果，box的外边距为0，添加内边距。盒子的宽度是由img-width和边距撑开的。也就是说盒子之间是没有间距的，但是盒子内部有一些边距的效果。这样在js设置位置的
2、时候就不用考虑边距问题，挺直调用box的宽度就可以了。 设置盛放全部box的div的position为relative，这样在设置top值或是left值的时候，就不用考虑最外层的margin属性。 放置图片的位置：获得第一行图片的高度并且存放在数组里面，接下来的图片设置position为absolute，放置在高度最小的图片的下面，然后设置top和left，并且把数组的最小值加上新放置的图片的高度。也就是说HTML里面原始放置的图片除了第一行以外，其他的图片都是在js里面又重新定位的。 当滑动页面究竟部的时候触发大事函数，紧接着放置一些图片，这样保证图片的无限加载。 HTML文件： !DOCT
3、YPE html html head lang=en meta charset=UTF- title/title link rel=stylesheet href=waterfall.css type=text/css script src=waterfall.js/script /head body div id=content div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box d
4、iv class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div cl
5、ass=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=b
6、ox_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_im
7、g img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img
8、 src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=
9、Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.
10、jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /
11、div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /
12、div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div d
13、iv class=box div class=box_img img src=Img/.jpg /div /div div class=box div class=box_img img src=Img/.jpg /div /div /div /body /html CSS文件： * margin: ; padding:; #content position: relative; background-color: #; .box padding: px; float: left; .box_img padding: px; border: px solid #cccccc; box-shad
14、ow: px #cccccc; border-radius: px; img width: px; height: auto; js文件： Math.floor()函数能够向下取整。 Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。 window.onscroll=function()；滑动页面的时候触发这个函数。 document.documentElement.clientHeight；扫瞄器显示出来的高度。 document.documentElement.scrollTop；滑动的距离。 /* * Created by asua
15、on 2021/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;ilodeImage.Date.length;i+) var box=document.createElement(
16、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.Datei.src; box_img.appendChild(img); imgLocation(
17、content,box); function checkFlag() var cparent=document.getElementById(content); var ccontent=getChildElement(cparent,box); var lastContentHeight=ccontentccontent.length-1.offsetTop; var scrollHeight=document.documentElement.scrollTop|document.body.scrollTop; var pageHeight=document.documentElement.
18、clientHeight|document.body.clientHeight; console.log(lastContentHeight+:+scrollHeight+:+pageHeight); if(lastContentHeightscrollHeight+pageHeight) return true; function imgLocation(parent,child) var cparent=document.getElementById(parent); var ccontent=getChildElement(cparent,child); var imgwidth=cco
19、ntent0.offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/imgwidth); cparent.style.cssText=width:+imgwidth*cols+px;margin:30px auto; var heightArr=; for(var i=0;iccontent.length;i+) if(icols) heightArr.push(ccontenti.offsetHeight); else var minHeight=Math.min.apply(null,heightArr)
20、; var minIndex=getMinIndex(heightArr,minHeight); ccontenti.style.position=absolute; ccontenti.style.top=minHeight+px; ccontenti.style.left=ccontentminIndex.offsetLeft+px; heightArrminIndex+=ccontenti.offsetHeight; function getMinIndex(heightArr,minHeight) for(var i=0;iheightArr.length;i+) if(heightArri=minHeight) return i; function getChildElement(parent,content) var contentArr=; var allcontent=parent.getElementsByTagName(*); for(var i=0;iallcontent.length;i+) if(allcontenti.className=content) contentArr.push(allcontenti); return contentArr; 好了，关于js实现图片自动加载的瀑布流效果代码到此给大家介绍完了，盼望对大家有所关心！ .