欢迎光临
我的个人博客网站

两种方式实现水平瀑布流布局


在实际开发中,经常会遇到图片排序处理的问题,进过多次尝试,我在这里总结两种图片水平排序的方式:

第一种:CSS属性直接设置图片样式

具体是使用CSS中的column-count属性,给图片的外部box设置后,里面的img可以直接根据数量来进行排序

页面效果就是以下这样:

两种方式实现水平瀑布流布局

 

html和css代码如下:

两种方式实现水平瀑布流布局

 

 两种方式实现水平瀑布流布局

 

 可能细心的你会发现,但是这个属性可以进行水平对齐,但是排序会出现问题,所以应用场景有限,但是优势也很明显,就是省事(*^▽^*)。

第二种:使用js代码来动态进行设置

原理是通过一个数学逻辑来对图片进行计算,假设我们需要把4张大小不同的图片进行水平瀑布流对齐,我们需要先计算好所有图片的高宽比,然后给一个统一的高度,根据这个统一的高度进行排序,我们可以获得一个长方形,

这个长方形也是有宽高比的,我们把它计算出来,然后将宽度调整为页面宽度,那么这个时候高度我们自需要调整宽高比就可以确定,根据这个调整好的高度,我们再根据4张图片的宽高比,来获取这个时候的宽度,对图片进行排序即可。

案例如下:

第一张图片:400*300,宽高比为4:3

第二张图片:500*100,宽高比为5:1

第三张图片:200*500,宽高比为2:5

第四张图片:200*100,宽高比为2:1

我们首先确定一个高度,这里设定为300

那么总的长方形宽度为2620,

这个长方形的宽高比为131:15

接下来我们需要获取页面宽度,这里以1920为例,

 那么安装这个比例来调整总长方形,它的高度为219.84,这里小数点两位后的可以直接舍弃,从页面显示来看无关痛痒

那么安装这个高度,我们再反推4张图片的宽度为:

第一张图片:293.12*219.84

第二张图片:1099.2*219.84

第三张图片:87.963*219.84

第四张图片:439.68*219.84

这四张图片的总宽度为:1919.963

根据这个逻辑来设置js代码,对所有的图片进行分组,在分组中进行这样的操作,就可以实现图片水平瀑布流布局,代码设计的好,可以兼容所有宽度,一切随心所欲,但缺点也是有的,就是麻烦,麻烦,麻烦,而且考虑到这套逻辑实现,

对内存的占用量较大,对懒加载也很不友好,需要改逻辑才可以兼容栏加载和图片缓存︿( ̄︶ ̄)︿。

这里提供一个案例dome给大家进行观看和调试

http://www.linheng.xyz/project/sppbl/index.html

效果如下(具备简单的懒加载功能):

两种方式实现水平瀑布流布局

 

 主要代码如下:

<html>

<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title>水平瀑布流懒加载</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
    }

    .box {
        overflow: auto;
        /* width:80%; */
        border: 1px black solid;
        margin: 0 auto;
    }

    .box img {
        float: left;
        display: block;
    }
</style>

<body>
    <h1>水平瀑布流</h1>
    <div class=”box”></div>
</body>
<script>
    var box = document.getElementsByClassName(“box”)[0];
    var imglist = [];
    var img,
        length = 0,
        count = 0,
        line = 3;
    // console.log(box);
    var maxwidth = window.innerWidth – 100;
    box.style.width = maxwidth + “px”;
    addimg(20);

    function fomate() {
        var row = Math.floor(length / line);

        // console.log(row);
        for (var i = 0; i < row; i++) {
            var w = 0; //每行的宽度和

            for (var j = 0; j < line; j++) {
                if (imglist[i * line + j].prop != undefined) {
                    w += imglist[i * line + j].prop * 300; //单张图片以300为高的宽度累加到w中
                }

            }

            // console.log(w);
            var h = 300 * maxwidth / w;

            for (var j = 0; j < line; j++) {
                if (imglist[i * line + j].prop != undefined) {
                    imglist[i * line + j].style.height = h + “px”;
                    imglist[i * line + j].style.width = h * imglist[i * line + j].prop + “px”;
                }

            }
        }
    }

    window.onresize = function () {
        maxwidth = window.innerWidth – 100;
        box.style.width = maxwidth + “px”;
        fomate();
    }

    window.onscroll = function () {
        var scroll = document.documentElement.scrollTop;
        var screen = window.innerHeight;
        var offsetTop = box.offsetTop;
        var height = box.offsetHeight;

        if (scroll + screen – offsetTop – height > -20) {
            addimg(20);
        }

        ;
    }

    function addimg(i) {
        length += i;

        // console.log(length);
        for (var i = 1; i <= 20; i++) {
            img = createimg(“img/pics (” + i + “).jpg”, box);
            imglist.push(img);
            // console.log(imglist.length);

        }
    }

    function createimg(src, pad) {
        //创建图片的方法
        var length = 20;
        count = 0;
        var img = document.createElement(“img”);
        img.src = src;
        pad.appendChild(img);

        img.onload = function () {
            this.prop = this.width / this.height;
            count++;
            // console.log(count);

            if (count == length) {
                fomate();
            }
        }

        return img;

    }
</script>

</html>

以上是我总结出的两种方法,如果有更好的方法,欢迎你在评论进行补充ヾ(◍°∇°◍)ノ゙。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 两种方式实现水平瀑布流布局
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏