jQuery实现瀑布流布局详解(PC和移动端)


Posted in Javascript onSeptember 01, 2020

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例。

我们用百度图片作为范例:

jQuery实现瀑布流布局详解(PC和移动端)

这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局:

jQuery实现瀑布流布局详解(PC和移动端)

可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似。

动手

首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动:

<div class="box">
 <img class="img" src="./resource/images/1.jpg" />
 <div class="desc">Description</div>
</div>
<div class="box">
 <img class="img" src="./resource/images/2.jpg" />
 <div class="desc">Description</div>
</div>
<div class="box">
 <img class="img" src="./resource/images/3.jpg" />
 <div class="desc">Description</div>
</div>

得到如下效果:

jQuery实现瀑布流布局详解(PC和移动端)

接下来:

var boxArr = $('.box'),
  num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
 columnHeightArr = [];
columnHeightArr.length = num;
boxArr.each(function(index, item) {
 if (index < num) {
 columnHeightArr[index] = $(item).outerHeight(true);
 } else {
 var minHeight = Math.min.apply(null, columnHeightArr),
 minHeightIndex = $.inArray(minHeight,columnHeightArr);

 $(item).css({
 position: 'absolute',
 top: minHeight,
 left: boxArr.eq(minHeightIndex).position().left
 });
 }
});

以上代码大意为:

1. 首先计算出在浏览器中一行能容纳多少图片 (num) ,注意这里用了outerWidth,当传入true时会返回元素包括margin、padding、border全部盒模型属性的尺寸;

2. 创建一个存储每一列高度的数组 (columnHeightArr) ,该数组的长度即为num值;

3. 遍历所有图片,将第一行的图片高度分别存入列高数组中 (columnHeightArr) ,从第二行开始,首先计算出所有列中最小的高度 (minHeight) 以及最小高度所在的列 (minHeightIndex)。之后将第二行开始的图片定位在高度最小列的下面,效果如下:

jQuery实现瀑布流布局详解(PC和移动端)

可以看到虽然摆对了地方但是所有的图片都放在同一个地方了,这是因为我们需要在摆放一张图片后就要增加该列的高度:

var boxArr = $('.box'),
 num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
 columnHeightArr = [];
columnHeightArr.length = num;

boxArr.each(function(index, item) {
if (index < num) {


columnHeightArr[index] = $(item).outerHeight(true);

} else {


var minHeight = Math.min.apply(null, columnHeightArr),
 minHeightIndex = $.inArray(minHeight, columnHeightArr);



$(item).css({
 
position: 'absolute',
 
top: minHeight,
 
left: boxArr.eq(minHeightIndex).position().left
 });



columnHeightArr[minHeightIndex] += $(item).outerHeight(true);

}
});

 结果正确: 

jQuery实现瀑布流布局详解(PC和移动端)

注意:上面的代码需要运行于window.onload方法里,因为只有当页面中的图片资源全部加载完毕后,其每张图片的高度才会有效。

因此会有一些很严重的问题,当网络不好的时候图片没有完全加载完成就会出现图片展示不全高度缺失的情况,这点在移动端很明显。而且当我们加载更多时,更难判断新追加的图片是否加载完成。

在实际生产中更不会有一开始就将图片写死在HTML中的情况,所以我们通常用以下的方式来做:

首先我们在获得图片地址时同时也需要获取图片的宽和高 ,这点对服务端后台来说并不是什么难事,可以拜托后台兄弟将图片的宽高数据拼进JSON,传递给你;

*接下来介绍小技巧,非常实用,它能保证一个元素无论大小如何变化,比例始终保持一致。这个技巧尤其适用于移动端,因为元素为了响应式通常使用百分比的形式。

假如手机页面中有一张图片,其宽度要为屏幕的一半,高宽比为2:1,需要在任何分辨的手机上保持比例不变。如何做?给元素设置如下属性:

.box {
 width: 50%;
 height: 0;
 padding-bottom: 100%;
}

不设置高度,而是用padding“挤”出元素高度,而padding的百分比值都是基于父级容器的宽度。padding需要挤多少呢?就是宽度乘以高宽比(width和padding值均为百分比值),这就是我们为什么需要获得图片尺寸的原因。

效果:

jQuery实现瀑布流布局详解(PC和移动端)

可以看到在chrome手机模拟器中ipone4和肾6Plus的显示效果是完全一样的。在手机页面中宽是固定的,而高会随着页面内容的多少而变化,这个技巧利用元素padding百分比的值其实是基于其父级容器的宽,将高的值巧妙的转化成与宽相关。

说到现在可能有人终于忍不住要问了,讲了这么多和瀑布流有什么关系!简单就是一句话,我们要抛弃 img 标签,而采用背景图的方式。为了使用背景图,就得保持元素的比例永远与图片保持一致。

通过这种方式,可以不用判断图片都加载完毕,直接产生一些与图片同比例的div,再为其设置背景图,如下:

jQuery实现瀑布流布局详解(PC和移动端)

这里比如最外层的box宽度为220px,里面的img元素宽度就可以为100%,高度就可以通过padding挤出了。 

懒加载

使用背景图的方式还有好处那就是可以比较方便的实现懒加载。那什么是懒加载呢?就是当元素在我们的视野中时才展示图片,滚动时屏幕下方的图片并不展示,这可以很好的增加加载速度提升体验。

首先我们给最外层的box增加一个box-item类名(之后有用),将图片url并不设置给backgroundImage属性,而是赋给一个自定义属性:data-src

<div class="box box-item">
 <div class="img" data-src="./resource/images/1.jpg"></div>
 <div class="desc">Description</div>
</div>

接下来我们编写懒加载函数:

function lazyLoad() {
var boxArr = $('.box-item');



boxArr.each(function(index, item) {


var viewTop = $(item).offset().top - $(window).scrollTop(),
 imgObj = $(item).find('.img');

 if ((viewTop < $(window).height()) && (($(item).offset().top + $(item).outerHeight(true)) > $(window).scrollTop())) {
 
imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src');
 
$(item).removeClass('box-item');
 }
 })
}

首先我们获取所有拥有 .box-item 类名的元素,遍历。viewTop 为图片相对于浏览器窗口的相对高度,类似于position:fixed感觉。

通过条件进行判断,只有当该图片在浏览器窗口内(之上或之下都不行)时,将需要设置背景图元素的 data-src 值展示出来,并删除该属性。

之后将最外层元素的 box-item 删除,因为已经展示出来的图片不需要再进行这些判断,删除了该类名下一次滚动时就不会获取到已经展示过的元素,需要遍历的次数就会越来越少,这样能起到一个优化的作用。

该函数需要在你的元素已经append进页面时调用,以及在滚动时调用:

lazyLoad();
$(window).scroll(lazyLoad);

滚动加载

说完了懒加载,再说说滚动加载。所谓滚动加载就是当页面滚动到底部附近时加载新的图片。我这里选择的是滚动到高度最小的列底部时加载新的数据,你也可以根据自己的喜好来做判断。

function scrollLoad() {
var viewHeight = $(window).scrollTop() + $(window).height(),
 minHeight = Math.min.apply(null, columnHeightArr);


if (viewHeight >= minHeight) {
 
//loadMore...

}
}

滚动加载也是在window的滚动事件中进行监听,可以与懒加载一起进行:

$(window).scroll(function() {
 scrollLoad();
 lazyLoad(); 
});

说完了PC端,我们来说下手机端。其实原理是一样的,只是从多列变成固定的两列了。

var boxArr = $('.box'),
 columnHeightArr = [];
columnHeightArr.length = 2;

boxArr.each(function(index, item) {
if (index < 2) {


columnHeightArr[index] = $(item).outerHeight(true);

} else {


var minHeight = Math.min.apply(null, columnHeightArr),
 minHeightIndex = $.inArray(minHeight, columnHeightArr);



$(item).css({
 
position: 'absolute',
 
top: minHeight,
 
left: boxArr.eq(minHeightIndex).position().left
 });



columnHeightArr[minHeightIndex] += $(item).outerHeight(true);

}
});

不同的是为了适应不同屏幕的手机,最外层的box容器宽度和边距要设置成百分比的形式。

jQuery实现瀑布流布局详解(PC和移动端)

 最后有一点要注意,因为我们没有像百度一样用一个个列盒子去装,而是用定位的方式。导致的问题是图片元素的父级没法自适应高度,如果你有相关的需求我们可以计算出所有列中最长的长度,并将这个值赋值给父容器的min-height属性:

$('body').css('minHeight',Math.max.apply(null, columnHeightArr)); 

整理下完整的代码,瀑布流的全套服务就到这了

var dataArr = [
 {picUrl:'./resource/images/1.jpg',width:522,height:783},
 {picUrl:'./resource/images/2.jpg',width:550,height:786},
 {picUrl:'./resource/images/3.jpg',width:535,height:800},
 {picUrl:'./resource/images/4.jpg',width:578,height:504},
 {picUrl:'./resource/images/5.jpg',width:1440,height:900}
 ];

 $.each(dataArr, function(index, item) {
 $("body").append('<div class="box box-item">' +
 '<div class="img" style="height:0;padding-bottom:'+cRate(item) * 100 + "%"+'" data-src="'+item.picUrl+'"></div>' +
 '<div class="desc">Description</div>' +
 '</div>');
 });

 var boxArr = $('.box'),
 num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
 columnHeightArr = [];
 columnHeightArr.length = num;
 
 arrangement();

$('body').css('minHeight',Math.max.apply(null, columnHeightArr));

 lazyLoad();

 function arrangement() {
 boxArr.each(function(index, item) {
 if (index < num) {
 columnHeightArr[index] = $(item).outerHeight(true);
 } else {
 var minHeight = Math.min.apply(null, columnHeightArr),
 minHeightIndex = $.inArray(minHeight, columnHeightArr);
 $(item).css({
 position: 'absolute',
 top: minHeight,
 left: boxArr.eq(minHeightIndex).position().left
 });
 columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
 }
 });
 }

 function lazyLoad() {
 var boxArr = $('.box-item');
 boxArr.each(function(index, item) {
 var viewTop = $(item).offset().top - $(window).scrollTop(),
 imgObj = $(item).find('.img');
 if ((viewTop < $(window).height()) && ($(item).offset().top + $(item).outerHeight(true) > $(window).scrollTop())) {
// console.log($(item).attr('data-src'));
 imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src');
 $(item).removeClass('box-item');
 }
 })
 }

 function cRate(obj) {
 return obj.height / obj.width;
 }

 function scrollLoad() {
 var viewHeight = $(window).scrollTop() + $(window).height(),
 minHeight = Math.min.apply(null, columnHeightArr);
 if (viewHeight >= minHeight) {
 //loadMore...
 }
 }

 $(window).scroll(function() {
 lazyLoad();
 scrollLoad();
 });

以上就是为大家分享的关于jQuery瀑布流布局,内容很丰富,需要大家一点点的理解消化,真正的做到学以致用,希望能够帮助到大家。

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
异步JS框架的作用以及实现方法
Oct 29 #Javascript
图解JavaScript中的this关键字
May 28 #Javascript
jquery validate demo 基础
Oct 29 #Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 #Javascript
jquery实现的伪分页效果代码
Oct 29 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
js+css实现打字效果
2020/06/24 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python爬取哈尔滨天气信息
2018/07/14 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python开发游戏的前期准备
2019/05/05 Python
python tkinter控件布局项目实例
2019/11/04 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年业务工作总结
2014/11/17 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python