JQuery实现瀑布流图片加载

最新推荐文章于 2023-05-29 23:38:41 发布

picacho_pkq

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量376

点赞数 1

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/pikcacho_pkq/article/details/126089068

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.demo项目结构

在这里插入图片描述

2.数据准备

本次demo只有前端部分没有后端数据，所以采用json格式的假数据，将json中的数据作为模拟数据渲染到页面上即可。
falls.json

{
	"success":true,
	"row":[{
		"src":"img/0.jpg"
		},{
		"src":"img/1.jpg"
		},{
		"src":"img/2.jpeg"
		},{
		"src":"img/3.jpg"
		},{
		"src":"img/4.jpg"
		},{
		"src":"img/5.jpg"
		},{
		"src":"img/6.jpg"
		},{
		"src":"img/7.jpeg"
		},{
		"src":"img/8.jpg"
		}]
}

3.创建页面

demo只是为了展示图片，设计较为简单，只需要一个 div 容器，另外引入 CSS 与 JS 依赖即可。
falls.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/falls.js"></script>
		<link rel="stylesheet" type="text/css" href="css/falls.css"/>
	</head>
	<body>
		<div id="container">
		</div>
	</body>
</html>

falls.css

body {
	margin: 0;
	padding: 0;
	background-color: #ccc;
}
#container:after {
	content: "";
	display: block;
	clear: both;
}
#container {
	width: 1300px;
	margin: 0 auto;
}
#container .img-box {
	cursor: pointer;
}
#container .img-box {
	float: left;
	padding: 5px;
}
#container .img-box img {
	width: 250px;
	height: auto;
}

4.实现瀑布流效果

4.1 初始化

将公共属性封装到一个对象中并初始化。

var falls = {
  //每列当前的高度
  topArry: [0, 0, 0, 0, 0],
  //每列当前距离浏览器的左边距
  leftArry: [],
  //每次加载的图片
  imgArray: [],
  //每次加载的第一张图片相对于所有图片（包括已加载图片）的索引
  num: 0,
  //加载图片数，默认 9 张，根据实际修改
  dataNum: 9,
};

//初始化函数
$(function () {
  getData();
  getMinHeight();
});

4.2 获取json数据与展示

这里我们需要获取模拟的 JSON 数据，主要是用到 jQuery 的 getJSON(url, callback) 函数：

function getData() {
  $.getJSON('json/falls.json', function (data) {
    if (data.success) {
      var row = data.row,
        len = row.length,
        html = '';
      //将获取到的数据通过字符串连接的方式添加到 html 内容中
      for (var i = 0; i < len; i++) {
        html +=
          "<div class='img-box'>" + "<img src='" + row[i].src + "'/></div>";
      }
      $('#container').append(html);
      getLeft();
      //可确保不同的显示器屏幕能初始化时便将图片布满屏幕
      if (getMinHeight() < window.screen.height) {
        getData();
      }

      falls.imgArray = [];

      $('#container .img-box').each(function (i) {
        if (i >= falls.num) {
          falls.imgArray.push(this);
        }
      });
      falls.num += falls.dataNum;
      //修改每张图片的位置
      reset();
    }
  });
}

每次加载时都需要将图片放到当前显示的最短的那列图片之下，所以需要通过保存每列当前高度的全局数组找到最短的那一列图片，并返回其值。

function getMinHeight() {
  var minHeight = Math.min.apply(null, falls.topArry);
  return minHeight;
}

function getLeft() {
  for (var i = 0; i < 5; i++) {
    var left = $('#container .img-box').eq(i).offset().left;
    falls.leftArry.push(left);
  }
}

得到最短一列图片后，便可根据两个数组topArray[]、leftArray[]对应的索引值相同，很容易的找到最短那一列距离浏览器的左边距，控制图片的定位也就很容易实现了。

function reset() {
  var img = falls.imgArray;
  for (var i = 0, len = img.length; i < len; i++) {
    var minHeight = getMinHeight(),
      index = 0;

    for (var x = 0; x < falls.dataNum; x++) {
      if (minHeight == falls.topArry[x]) {
        index = x;
        break;
      }
    }
    $(img[i]).css({
      position: 'absolute',
      top: minHeight,
      left: falls.leftArry[index],
    });

    falls.topArry[index] += $(img[i]).height();
  }
}

最后绑定鼠标滚轮滚动事件。

window.onscroll = function () {
  var minHeight = getMinHeight();
  //当屏幕滚动的距离大于最短高度的二分之一（可任意设置，看个人喜好），再次加载图片
  if (window.scrollY > minHeight / 2) {
    getData();
  }
};