javascript自适应宽度的瀑布流

最新推荐文章于 2023-10-28 14:47:14 发布

原创最新推荐文章于 2023-10-28 14:47:14 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#瀑布流

js 专栏收录该内容

31 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：

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">
    	/*每个li的宽度*/
    	var singleLiWidth = 200;

    	/*每个li的margin值*/
    	var singleLiMargin = 10;

    	/*存放每一列li的总高度*/
	    var eachColHeightArray = [];

	    /*初始化是li的数量*/
	    var originalLiCount = 20;

	    /*滚动滑轮新增li的数量*/
	    var increaseCount = 30;

	    var wrap = document.querySelector("#wrap");

	    /*计算每个li的随机高度*/
	    function calculateSingleLiHeightRandom() {
	    	var fromHeight = 100;
	    	var toHeight = 200;
	    	return fromHeight + (toHeight - fromHeight) * Math.random();
	    }

	    /*创建li*/
	    function createLi(index) {
	    	var li = document.createElement("li");
	        var height = calculateSingleLiHeightRandom();
	        li.style.width = singleLiWidth + "px";
	        li.style.height = height + "px";
	        li.style.lineHeight = height + "px";
	        li.style.margin = singleLiMargin + "px";
	        li.innerHTML = index;
	        wrap.appendChild(li);
	        setLiPosition(li);
	    }

	    /*定位每个生成的li位置 绝对定位*/
	    function setLiPosition(li) {
	    	var minIndex = 0;
	    	var minHeight = eachColHeightArray[0];
	        for (var i = 0; i < eachColHeightArray.length; i++) {
	            if (eachColHeightArray[i] < minHeight) {
	            	minIndex = i;
	                minHeight = eachColHeightArray[i];
	            }
	        }
	        li.style.top = minHeight + "px";
	        li.style.left = minIndex * (singleLiWidth + singleLiMargin * 2) + "px";
	        eachColHeightArray[minIndex] += li.clientHeight;
	    }

	    /*生成li群*/
	    function generateLiGroup(count) {
	    	var lis = document.querySelectorAll("li");

	    	for (var i = 0; i < count; i++) {
	    		createLi(i + 1 + lis.length);
	    	}
	    }

	    /*初始化存放每列高度的数组为0*/
	    function initEachColHeightArray() {
	    	eachColHeightArray = [];
	    	var clientWidth = document.body.clientWidth;
		    var cols = parseInt(clientWidth / (singleLiWidth + 2 * singleLiMargin));

	        for (var i = 0; i < cols; i++) {
	        	eachColHeightArray.push(0);
	        }
	    }

	    function init() {
	    	initEachColHeightArray();

	    	generateLiGroup(originalLiCount);
	    }

	    window.onscroll = function() {
	        //得到滚动距离
	        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	        //得到页面的视口高度
	        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	        //得到总的高度 含滚动长的距离
	        var scrollHeight = document.body.scrollHeight;
	        
	        if (scrollTop + clientHeight >= scrollHeight) {
	        	generateLiGroup(increaseCount);
	        }
	    }

	    window.onmousewheel = function(e) {

	        //得到页面的视口高度
	        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	        //得到总的高度 含滚动长的距离
	        var scrollHeight = document.body.scrollHeight;

	    	if (clientHeight == scrollHeight && e.wheelDelta == -120) {
	        	generateLiGroup(increaseCount);
	        }
	    }

	    window.onresize = function() {
	    	initEachColHeightArray();

	        var lis = document.querySelectorAll("li");

	        for (var i = 0; i < lis.length; i++) {
	            setLiPosition(lis[i]);
	        }
	    }

	    init();
    </script>
</html>