图片瀑布流

最新推荐文章于 2024-07-22 22:37:58 发布

xin_jiao

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量20

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/xin_jiao/article/details/134214834

版权

一.什么是瀑布流

瀑布流，又被称作为瀑布流式布局，是一种比较流行的网站页面布局方式，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。常见于一些图片为主的网站。

总结瀑布流式布局的特征如下：

内容框宽度固定，高度不固定

内容框从左到右排列，一行排满后，其余内容框就会按顺序排在短的一列后。

二.为什么要用瀑布流布局

1、吸引用户

当用户在浏览瀑布流式布局的时候，用户会产生一种错觉，就是信息是不停的在更新的，这会激发用户的好奇心，使用户不停的往下滑动。

2.良好视觉体验

采用瀑布流布局的方式可以打破常规网站布局排版，给用户眼前一亮的新鲜感，用户在浏览内容时会感到很有新鲜感，带来良好的视觉体验。

3.更好的适应移动端

由于移动设备屏幕比电脑小，一个屏幕显示的内容不会非常多，因此可能要经常翻页。而在建网站时使用瀑布流布局，用户则只需要进行滚动就能够不断浏览内容。

三.实现原理

我们已经总结出了瀑布流式布局的两大特征：

内容框宽度固定，高度不固定。
内容框从左到右排列，一行排满后，其余内容框就会按顺序排在短的一列后。

那么我们根据这两大特征就不难想出它的实现原理：

首先我们先通过计算一行能够容纳几列元素，然后在通过计算比较找出这一列元素中高度之和最小一列，然后将下一行的第一个元素添加至高度之和最小的这一列的下面，然后继续计算所有列中高度之和最小的那一列，然后继续将新元素添加至高度之和最小的那一列后面，直至所有元素添加完毕。

（1）首先我们放上一行<div>，它们高度不同，宽度相同：

（2）找出所有元素高度之和的最小的那列在那一列的下面添加新的元素

（3）然后继续计算，获取高度之和最小的那一列，在那一列继续添加新元素

<body>
    <div class="container" id="con">
        <div class="item">
            <img src="./img/01.jpg" alt="">
        </div>
        ...
        <div class="item">
            <img src="./img/02.jpg" alt="">
        </div>
    </div>
</body>
<script>
    window.onload = function(){
        waterFall()
        window.onresize = waterFall
    }
    function waterFall(){
        var container = document.getElementById("con")
        var item = document.getElementsByClassName("item")
        var width = item[0].offsetWidth
        var clientWidth = document.documentElement.clientWidth
        var lie = Math.floor(clientWidth/width)

        var hrr = []
        for(var i=0;i<item.length;i++ ){
            if(i<lie){
                item[i].style.top = '0px'
                item[i].style.left = i*width +"px"
                hrr.push(item[i].offsetHeight)
            }else{
                let min = Math.min.apply(null,hrr)
                let index = hrr.indexOf(min)
                item[i].style.top = min +"px"
                item[i].style.left = index*width +"px"
                hrr[index]+= item[i].offsetHeight
            }
        }
    }
</script>

xin_jiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片瀑布流

首先我们先通过计算一行能够容纳几列元素，然后在通过计算比较找出这一列元素中高度之和最小一列，然后将下一行的第一个元素添加至高度之和最小的这一列的下面，然后继续计算所有列中高度之和最小的那一列，然后继续将新元素添加至高度之和最小的那一列后面，直至所有元素添加完毕。采用瀑布流布局的方式可以打破常规网站布局排版，给用户眼前一亮的新鲜感，用户在浏览内容时会感到很有新鲜感，带来良好的视觉体验。当用户在浏览瀑布流式布局的时候，用户会产生一种错觉，就是信息是不停的在更新的，这会激发用户的好奇心，使用户不停的往下滑动。
复制链接

扫一扫