ES6+JQuery实现瀑布流效果

瀑布流

1. 定位后确定浏览器显示区域内，一行能放多少列图片盒子。

获取页面的宽度获取图片盒子的宽度
获取页面的宽度获取图片盒子的宽度
显示的列数=页面宽度/图片盒子宽度
column = pageWidth / itemWidth

2. 确定列数之后，排列第一行

下面还有很多图片盒子，我们先要排列第1行，所以在for循环里就要判断一下，当i(所有图片盒子的索引)<column(显示列数)的时候，说明在第1行;
知道在第1行之后，动态设置每个图片盒子的left值就能排好第1行。
left = i * ( itemWidth + gap );

3. 第1行排列好之后，获取第1行所有图片盒子的高度

需要定义一个数组arr，将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置;
获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是︰等页面都加载完之后才去请求加载，所以不写在入口函数里可能会出现高度获取不到的情况。

4. 排列第二行

获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方;
此时的left值就是高度最小列的offsetLeft;top值就是∶第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)。
记录下高度最小列的索引index，后面计算会用到;
设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度。

5. 改变最小列当前高度

此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组
当前高度最小列的高度=当前高度最小列的高度＋间隙＋下面图片盒子的高度

6. 触发resize事件

将整个设置样式的部分封装成一个函数，在onload里面注册一个resize事件，只要页面一发生改变，就触发样式部分的代码。
实时改变pageWidth的宽度，这样瀑布流就会是一个响应式的效果了

7. 懒加载事件

通过页面可视区高度+滚动条卷去的高度 = 最后一张图片图片的offsetTop的时候加载下面的图片

8. 代码示例:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>瀑布流</title><style>* {margin: 0;padding: 0;position: relative;}img {width: 220px;display: block;}.item {box-shadow: 2px 2px 2px #999;position: absolute;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!-- html 部分 -->
<div id="box"><!--<div class="item"><img src="../image/瀑布流/001.jpg" alt=""></div><div class="item"><img src="../image/瀑布流/030.jpg" alt=""></div>-->
</div><script>let imgList = ["https://s5.mogucdn.com/mlcdn/c45406/210123_80fb475jaa3c85a2b533ake67c5jb_5000x6660.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/201007_5ef1begkc3k33254fca8kcjk26703_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210504_2bgkjaekcgl7al11fllk576k19g2d_6157x9236.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/201005_3747744121i53l20gl7e5df72f101_4999x7499.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210713_19h2fa2ff2i7leb0iib0h1hacbc0f_750x750.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/200911_60age6f2k4ekic0ii8j550699a394_715x751.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210803_3eekh543e8ak9k1j4g4c8l0h74gd7_800x1200.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210401_2ihd8726caji6llkjf9j5fhjja49c_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210806_8c362g6jeab3i660l4e4fidbe4fd4_1080x1440.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210511_3245e1i1569k16396h8k6d26gehh8_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210306_69ilei699h450bd84cb4cha9b31jj_5732x8599.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210421_602kie0e85e16ie38fd7jab9g488j_750x1000.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210522_34igd3eabfal5e9i4cdlch3i2767k_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210122_1ge4g5l19jij5af218c6h9ig9abh7_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/201007_754i59abjh334k7ccd1klifc82hjj_4464x5999.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210319_2ck168b51342db5k6772ljhf7lgl4_3800x5000.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/200501_1iacl56kkel7e98flhg8h510gkdhb_640x961.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210710_07bbcac5443i981l5alh45ilab6a4_640x960.jpg_500x9999.v1c7E.81.webp"]//创建图片元素for (let i = 0; i < imgList.length; i++) {let img = $(` <div class="item"><img src=${imgList[i]} alt=""></div>`)$("#box").append(img)}// 定义每一列之间的间隙 为10像素const gap = 10;window.onload = function () {waterfall()function waterfall() {const items = $("#box").children()const pageWidth = getClient().width;const itemWidth = items[0].offsetWidth;// 1- 确定列数  = 页面的宽度 / 图片的宽度const columns = parseInt(pageWidth / (itemWidth + gap));const arr = [];$.each(items, (index, element) => {if (index < columns) {$(element).css({top: 0,left: (itemWidth + gap) * index})arr.push(element.offsetHeight)} else {//其他行// 3- 找到数组中最小高度  和 它的索引let minHeight = arr[0];let minIndex = 0;for (let j = 0; j < arr.length; j++) {if (minHeight > arr[j]) {minHeight = arr[j];minIndex = j;}}// 4- 设置下一行的第一个盒子位置// top值就是最小列的高度 + gap$(element).css({top: arr[minIndex] + gap,left: items[minIndex].offsetLeft})// 5- 修改最小列的高度// 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度arr[minIndex] = arr[minIndex] + items[index].offsetHeight + gap;}})}window.onresize = () => {waterfall()}//当加载到最后一张的时候,加载更多图片window.onscroll = () => {const items = $("#box").children()if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {console.log("aaa")//模拟从后台请求的数据const data = ["https://s5.mogucdn.com/mlcdn/c45406/210123_80fb475jaa3c85a2b533ake67c5jb_5000x6660.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/201007_5ef1begkc3k33254fca8kcjk26703_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210504_2bgkjaekcgl7al11fllk576k19g2d_6157x9236.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/201005_3747744121i53l20gl7e5df72f101_4999x7499.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210713_19h2fa2ff2i7leb0iib0h1hacbc0f_750x750.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/200911_60age6f2k4ekic0ii8j550699a394_715x751.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210803_3eekh543e8ak9k1j4g4c8l0h74gd7_800x1200.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210401_2ihd8726caji6llkjf9j5fhjja49c_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210806_8c362g6jeab3i660l4e4fidbe4fd4_1080x1440.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210511_3245e1i1569k16396h8k6d26gehh8_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210306_69ilei699h450bd84cb4cha9b31jj_5732x8599.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210421_602kie0e85e16ie38fd7jab9g488j_750x1000.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210522_34igd3eabfal5e9i4cdlch3i2767k_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/55cf19/210122_1ge4g5l19jij5af218c6h9ig9abh7_640x960.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/201007_754i59abjh334k7ccd1klifc82hjj_4464x5999.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210319_2ck168b51342db5k6772ljhf7lgl4_3800x5000.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/200501_1iacl56kkel7e98flhg8h510gkdhb_640x961.jpg_500x9999.v1c7E.81.webp","https://s5.mogucdn.com/mlcdn/c45406/210710_07bbcac5443i981l5alh45ilab6a4_640x960.jpg_500x9999.v1c7E.81.webp"]for (let i = 0; i < data.length; i++) {let element = $(`<div class="item"><img src=${data[i]} alt=""></div>`)$("#box").append(element)}waterfall()}}}//兼容性处理function getClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}}function getScrollTop() {return window.pageYOffset || document.documentElement.scrollTop;}
</script>
</body>
</html>

ES6+JQuery实现瀑布流效果相关推荐

利用jquery实现瀑布流效果
前言: 现在很多内容型网站都会采用瀑布流布局来实现内容展示,包括文章类及图片类,我们可以自己动手来编写属于我们自己的瀑布流插件. 效果: CSS部分: *{margin: 0;padding: 0;} ...
30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
瀑布流效果Demo总结（5）之基于jquery+blocksit.min.js的实现
1.综述最近研究了时下流行的瀑布流展示效果. 当前共计尝试的方法及其优缺点如下: (1)基于JQuery框架及blocksit.min.js实现的瀑布流不连续,每列中多多少少都会有一些位置出现空白. ...
jQuery图片瀑布流demo效果示例（整理）jQuery瀑布流效果
效果图: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8& ...
jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过--今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果二.html代码 & ...
masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
css浮动+应用（瀑布流效果的实现）
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...

ES6+JQuery实现瀑布流效果

瀑布流

1. 定位后确定浏览器显示区域内，一行能放多少列图片盒子。

2. 确定列数之后，排列第一行

3. 第1行排列好之后，获取第1行所有图片盒子的高度

4. 排列第二行

5. 改变最小列当前高度

6. 触发resize事件

7. 懒加载事件

8. 代码示例:

ES6+JQuery实现瀑布流效果相关推荐

最新文章

热门文章