jQuery瀑布流

最新推荐文章于 2024-09-03 15:38:58 发布

多肉葡萄没有肉

最新推荐文章于 2024-09-03 15:38:58 发布

阅读量149

点赞数 1

文章标签： jquery css html javascript

本文链接：https://blog.csdn.net/z18172185535/article/details/120445351

版权

HTML

<body>
    <div id="waterfall"></div>
</body>

CSS

<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: #f0f0f0;
			}

			#waterfall {
				margin: 0 auto;
			}

			ul {
				list-style: none;
				width: 200px;
				float: left;
				margin: 0 5px;
			}

			ul>li {
				margin-bottom: 10px;
				background-color: lightsalmon;
			}
</style>

JavaScript

//通过页面宽度计算图片列数
	var cols = Math.floor($(document).width() / 210);
	//设置#waterfall的宽度
	$("#waterfall").css("width", cols * 210 + "px");
	//根据列数生成ul
	var uls = "";
	for (var i = 0; i < cols; i++) {
		uls += "<ul></ul>";
	}
	//将ul添加到#waterfall中
	$("#waterfall").append(uls);
	//添加图片（一次性添加36张）
	function addLi() {
		for (var x = 0; x < 36; x++) {
			//获取最矮的一列
			//默认第一列最矮
			var minUl = $("#waterfall>ul").eq(0);
			for (var y = 1; y < $("#waterfall>ul").length; y++) {
				if (minUl.height() > $("#waterfall>ul").eq(y).height()) {
					minUl = $("#waterfall>ul").eq(y);
				}
			}
			//随机li的高度：模拟图片高度不一致
			var randHeight = Math.floor(Math.random() * (300 - 200) + 200);
			//将li添加到最矮的这一列
			minUl.append("<li style='height:" + randHeight + "px'>" + x + "</li>");
		}
	}
	addLi();
	//当滚动条滚动时，判断是否已经滚动到底部
	$(window).scroll(function() {
		//判断是否已经滚动到底部
		if ($(this).height() + $(this).scrollTop() + 100 >= $(document).height()) {
			addLi();
		}
	})

多肉葡萄没有肉

关注

1
点赞
踩
0

收藏

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

HTML<body> <div id="waterfall"></div></body>CSS<style> * { padding: 0; margin: 0; } body { background-color: #f0f0f0; } #waterfall { margin: 0 auto; } ul { list-style: n
复制链接

扫一扫