js瀑布流

最新推荐文章于 2023-06-28 17:26:58 发布

灿尔哈擦苏

最新推荐文章于 2023-06-28 17:26:58 发布

阅读量339

点赞数 1

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

本文链接：https://blog.csdn.net/susuzhe123/article/details/62233621

版权

js 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="base.css" />
		<script type="text/javascript" src="jquery-1.11.0.js" ></script>
		<script>
			$(function(){ 
				var cols = $(".col");
				$(window).scroll(function(){
					//滚动条距顶部距离
					var top = $(window).scrollTop();
					//当前浏览器高度
					var height = $(window).height();
					//文档高度
					var wHeight = $(document).height();
					var flag = top + height == wHeight;
					if(flag){
						$.ajax({
							type:"get",
							url:"data.json",
							async:true,
							success:function(data){
								addImg(data)
							},
							error:function(mes){
								alert(1)
							}
						});
					}
				})
				//给每一列增加图片
				function addImg(arr) {
					//console.log(arr);
					for (var i = 0; i < arr.datas.length; i++) {
						//alert(arr.datas.length);
						var box = $('<div class = "box"></div>');
						//$(box).addClass("box");
						$(box).html('<img src="images/'+arr.datas[i]+'"  />');
						var col = getMinHeight(cols);
						$(col).append(box);
					}
					
					
				}

				/*
				   高度最小的列dom对象
				*/
				function getMinHeight(cols) {
					//console.log(cols);
					var min = cols[0]; //高度最小的列dom对象
					for (var i = 0; i < cols.length; i++) {
						if (min.offsetHeight > cols[i].offsetHeight) {
							min = cols[i];
						}
					}
					return min;
				}
				
			})
		</script>
	</head>
	<body>
		<div id="container">
			<div class="col">
				<div class="box">
					<img src="images/0.jpg" />
				</div>
				<div class="box">
					<img src="images/4.jpg" />
				</div>
				<div class="box">
					<img src="images/5.jpg" />
				</div>
			</div>
			<div class="col">
				<div class="box">
					<img src="images/1.jpg" />
				</div>
				<div class="box">
					<img src="images/4.jpg" />
				</div>
				<div class="box">
					<img src="images/6.jpg" />
				</div>
			</div>
			<div class="col">
				<div class="box">
					<img src="images/2.jpg" />
				</div>
				<div class="box">
					<img src="images/0.jpg" />
				</div>
			</div>
			<div class="col">
				<div class="box">
					<img src="images/3.jpg" />
				</div>
				<div class="box">
					<img src="images/8.jpg" />
				</div>
				<div class="box">
					<img src="images/9.jpg" />
				</div>
			</div>
		</div>
	</body>
</html>

其中data.json是自己模拟的数据{"datas":["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"]}

灿尔哈擦苏

关注

1
点赞
踩
0

收藏

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

$(function(){ var cols = $(".col"); $(window).scroll(function(){ //滚动条距顶部距离 var top = $(window).scrollTop(); //当前浏览器高度 var height = $(window).height(); //文档高度 va
复制链接

扫一扫