javascript自适应宽度的瀑布流

最新推荐文章于 2021-07-20 14:39:30 发布

timelessmemoryli

最新推荐文章于 2021-07-20 14:39:30 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：瀑布流

本文链接：https://blog.csdn.net/u014788227/article/details/52193635

版权

本文介绍了使用JavaScript创建自适应宽度的瀑布流布局的方法，包括计算页面列数、记录数据块高度、绝对定位填充、列高调整以及响应式窗口变化和滚动加载的处理。详细步骤涵盖从初始布局设置到动态加载的全过程。

摘要由CSDN通过智能技术生成

实现思路：

1、计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。

2、将各个数据块的高度尺寸记入数组中（需要等所有图片加载完成，否则无法知道图片的高度）。

3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。

4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。

6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

<!DOCTYPE html>
<html>
    <head>
        <title>js</title>
    </head>
    <style type="text/css">
	    #wrap li {
	    	list-style: none;
	        border: 2px solid gray;
	        position: absolute;
	        font-size: 100px;
	        text-align: center;
	        transition: all .5s;
	    }
    </style>
    <body>
        <ul id="wrap"></ul>
    </body>
    <script type="text/javascript"