JavaScript实现无限瀑布流的案例

最新推荐文章于 2023-11-25 13:32:48 发布

web前端开发V

最新推荐文章于 2023-11-25 13:32:48 发布

阅读量409

点赞数

文章标签： js css html javascript html5

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649125491&idx=2&sn=811518c0dec6a40e57e0f6b3fa810372&chksm=be5855de892fdcc8712f42d508e8d93ca68bc6d61d955afbd56ee51c38359b10414d59abbd61&scene=126&&sessionid=0

版权

瀑布流是一种常见的网页布局方式，在许多网站中我们都能看到“瀑布流”的效果，其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布，故将这种布局方式称为瀑布流。

生活中瀑布流实例，花瓣网：

在css中我们学习过使用Multi-columns来实现瀑布流的效果，通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。

以下代码是通过js方式来实现瀑布流：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cont{
            margin: 0 auto;
            position: relative;
        }
        .box{
            float: left;
            padding: 6px;
        }
        .imgbox{
            border: 1px black solid;
            border-radius: 6px;
            padding: 6px;
        }
        .imgbox img{
            width: 200px;
            display: block;
        }
</style>
    <script>
         onload = function () {
             new Waterfall();
         };
         function Waterfall() {
             this.ocont = document.querySelector(".cont");
             this.abox = document.querySelectorAll(".box");
             this.heightArr = [];
             this.init();


             //w1准备数据
             this.data = this.load();
             this.addScroll();
         }
         Waterfall.prototype.load = function(){
             return [{img:"images/1.jpg"},{img:"images/2.jpg"},{img:"images/3.jpg"},{img:"images/4.jpg"},{img:"images/5.jpg"},{img:"images/6.jpg"},{img:"images/7.jpg"},{img:"images/8.jpg"},{img:"images/9.jpg"},{img:"images/10.jpg"},]
         };
         Waterfall.prototype.addScroll = function(){
             var that = this;
             onscroll = function () {
                 if (that.isBottom()){
                     that.data.forEach(val=>{
                         var img = document.createElement("img");
                         img.src = val.img;
                         var imgbox = document.createElement("div");
                         imgbox.className = "imgbox";
                         var box = document.createElement("div");
                         box.className = "box";
                         imgbox.appendChild(img);
                         box.appendChild(imgbox);
                         that.ocont.appendChild(box);
                     });
                     that.abox = document.querySelectorAll(".box");
                     that.heightArr = [];
                     that.firstLine();
                     that.otherLine();
                 }
             }
         };
         Waterfall.prototype.isBottom = function(){
             var clientH = document.documentElement.clientHeight;
             var scrollT = document.documentElement.scrollTop;
             var scrollH = document.documentElement.scrollHeight;
             if (clientH + scrollT >= scrollH-200){
                 return true;
             }else{
                 return false;
             }
         };
         Waterfall.prototype.init = function () {
             this.num = Math.floor(document.documentElement.clientWidth/this.abox[0].offsetWidth);
             this.ocont.style.width = this.num*this.abox[0].offsetWidth+"px";
             //区分第一行
             this.firstLine();
             //区分最后一行
             this.otherLine();
         };
         Waterfall.prototype.firstLine = function () {
             for (var i=0;i<this.num;i++){
                 this.heightArr.push(this.abox[i].offsetHeight);
             }
         };
         Waterfall.prototype.otherLine = function () {
             for (var i=this.num;i<this.abox.length;i++){
                 var min = getMin(this.heightArr);
                 var minIndex = this.heightArr.indexOf(min);
                 //设置定位，left，top
                 this.abox[i].style.position = "absolute";
                 this.abox[i].style.top = min + "px";
                 this.abox[i].style.left = minIndex*this.abox[0].offsetWidth+"px";
                 this.heightArr[minIndex] += this.abox[i].offsetHeight;
             }
         };
         function getMin(arr) {
             var myarr = [];
             arr.forEach(val =>{
                 myarr.push(val);
             });
             return myarr.sort((a,b)=>a-b)[0];
         }
</script>
</head>
<body>
<div>
    <div>
    <div>
        <img src="images/4.jpg" >
    </div>
</div>
    <div>
        <div>
            <img src="images/3.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/2.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/1.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/5.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/6.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/7.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/8.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/9.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/10.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/4.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/3.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/2.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/1.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/5.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/6.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/7.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/8.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/9.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/10.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/3.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/2.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/1.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/5.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/6.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/7.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/8.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/9.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/10.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/3.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/2.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/1.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/5.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/6.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/7.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/8.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/9.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/10.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/3.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/2.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/1.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/5.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/6.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/7.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/8.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/9.jpg" >
        </div>
    </div>
    <div>
        <div>
            <img src="images/10.jpg" >
        </div>
    </div>
</div>
</body>
</html>

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现无限瀑布流的案例

瀑布流是一种常见的网页布局方式，在许多网站中我们都能看到“瀑布流”的效果，其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布，故将这种布局方式称为瀑布流。生活中瀑布流实例，花瓣网：在css中我们学习过使用Multi-columns来实现瀑布流的效果，通过 Multi-columns 相关的属性 column-count、column-gap ...
复制链接

扫一扫