HTMer
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
首页 / 技术 / 用Masonry和lazyload插件实现网页瀑布流布局的方法

用Masonry和lazyload插件实现网页瀑布流布局的方法

技术 • 2015-08-04 15:01:48 • 阅读 1961

瀑布流布局

我们常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如花瓣网。这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率。

因为对前端开发不了解,一开始为了找到这种布局叫什么名字也是花了我好久时间o(╯□╰)o

瀑布流布局不局限于等宽布局,例如下面这种形式也可以,来自Masonry官网截图。

Masonry官网 http://masonry.desandro.com/

瀑布流布局作为一种响应式布局,网页元素会自动根据页面宽度进行调整。按住Ctrl键并滚动鼠标滚轮,对网页进行缩放,我们就能看到网页元素之间的排版位置会不断变化,如上图所示。

瀑布流布局实现

对于上面的等宽瀑布流布局,看起来其实似乎很容易实现。但是由于HTML文档流的原理,网页元素的排列是先从左往右的,超出了才会换行,而不能直接控制成从上往下,因此直接利用HTML和CSS不太好处理,完美的瀑布流布局需要借助javascript或jQuery插件实现。这里说的不是很清楚,可以看下文中详细的图文解释。瀑布流布局的实现有很多种方式,这篇文章写得也很详细。

瀑布流布局浅析 http://ued.taobao.org/blog/2011/09/waterfall/

Masonry插件

Masonry插件是用的比较多的瀑布流布局插件。下面两张图展示了插件使用前后的网页布局,很容易看出其作用。

没使用Masonry时,网页元素按照HTML文档流排列,先从左到右,超出再换行,中间会有很多空隙,如下图所示。

使用了Masonry之后,每个元素位置会自动被调整,空隙少了很多,如图所示。

Masonry的基本使用

Masonry插件有两个版本,一个用的原生javascript,一个用的jQuery,如果你的网页刚好用到了其他jQuery库,建议用后者,因为代码量会少很多。两个版本的插件都可以在附件中的Demo里找到。

Masonry官方GitHub链接(JavaScript版本,含多个Demo示例)
https://github.com/desandro/masonry

jQuery Masonry也可在此下载(不知道这个站点算不算官网,感觉有点乱)
http://www.fishspotr.com

Masonry插件的使用很简单,但是官方GitHub给出的Demo里面代码太长不容易看明白,所以我提供了一个简化的Demo,使用了最常用的几个参数。具体的参数可以参考官方的Demo。

调用Masonry的代码可以写在<script>标签中,也可以直接写在HTML标签的data-masonry-options属性中,我提供的javascript版本的代码就写在了data-masonry-options属性中。

另外网上的很多文档都有错,都是套用官方的文档,把两个版本混为一谈。例如jQuery和javascript版本有一些参数是不一样的,例如javascript版本中的gutter参数在jQuery版本里面是gutterWidth,这个可以从源码中看到(也可能是版本升级改了参数名)。

Lazyload延迟加载图片

网页中常用Lazyload插件进行图片的延迟加载,用户滚动页面,要浏览到图片所在的位置时,才开始加载图片,否则不加载。一方面能加快网页刚刚载入时的速度,因为省去了很多图片的加载;另一方面能节省流量,因为只需要加载用户滚动到的地方的图片,如果用户中途离开页面,部分图片就不会被加载了。

这里顺便提一下Lazyload,使用这个插件时,IMG标签需要写成这种形式:<img src="loading.gif" data-original="img.jpg" />,src中是一个体积较小的占位图片,而真实图片地址写在后面的data-original属性中。网上有人说的Lazyload不能用、有bug,就是因为这个地方没有写好。

另外,为了防止有些用户浏览器没开javascript,上面这样写会导致图片不显示,因此稳妥起见还有必要添加一个<noscript>标签,在里面写上正常的图片标签,没有javascript时这段代码就会生效,如下所示。

  1. <img src="loading.gif" data-original="img.jpg" />
  2. <noscript><img src="img.jpg" /></noscript>

Masonry与Lazyload插件冲突

同时使用Masonry和Lazyload插件,会造成冲突。因为Masonry需要获取每个元素的尺寸从而计算出元素的位置,但是在网页滚动过程中,由于Lazyload动态加载图片会导致元素尺寸变化,而此时Masonry并不会重新计算,于是排列就混乱了,如图所示。

解决思路是每次Lazyload加载好一张图片就让Masonry重新排版。但找了很久也没找到Lazyload的回调参数……

先后考虑或尝试了滚动网页事件、IMG加载完成事件、DIV尺寸变化事件、延时等来触发Masonry,还考虑过提前在后台计算好图片标签的尺寸、把Lazyload换成其他插件,但是怎么做都感觉不好,效率低或是很麻烦等问题。

最后感觉最好的办法还是干脆自己改一下Lazyload的源码好了。但在看源码的时候意外发现了Lazyload其实有回调函数,也就是load参数。

网上大量文章都是复制粘贴来的一摸一样的几句话,甚至连官方也都没有说这个参数……莫非是我的打开方式不对?

我眼里的Lazyload官网 http://www.appelsiini.net/projects/lazyload

最后的解决方案就很清楚了,关键代码大致如下。示例Demo也在附件中。

  1. <script>
  2. $(function() {
  3. f_masonry();
  4. $("img").lazyload({
  5. effect:"fadeIn",
  6. failurelimit:40,
  7. load:f_masonry,
  8. });
  9. });
  10.  
  11. function f_masonry() {
  12. $(‘.masonry‘).masonry({
  13. gutterWidth: 20,
  14. itemSelector: ‘.item‘,
  15. isAnimated: true,
  16. });
  17. }
  18. </script>

附件:Demo下载地址
https://github.com/jzj1993/masonry-lazyload-demos

源代码
您可能感兴趣的
JAVA开发中连接Oracle19c多租户PDB时出错的解决方法
今天用JAVA开发连接Oracle19c数据库,提示ORA-12505错误,在网上找到了解决方法,拿来分享。...
技术 • 5年前 • 阅读 1835
随机密码在线生成器
如今的时代,到处都要设置密码,设置的太简单很容易被破解,设置的复杂又比较烧脑,今天整理了一个随机密码在线生成器,可以设置大小写字母、数字、特殊字符、密码长度等,非常方便,拿来分享。...
技术 • 6年前 • 阅读 1643
jsp(JAVA)时时抓取网页内容的方法
今天项目中需要使用jsp来时时远程抓取网页的内容,实现方法比较简单,拿来分享。...
技术 • 6年前 • 阅读 1348
JavaScript实现将人民币小写金额自动转换成大写的方法
今天在项目中遇到一个需求,需要根据用户输入的人民币小写金额自动转换成大写,以免用户再次输入大写金额的麻烦,拿来分享,可以处理整数、小数、负数。...
技术 • 6年前 • 阅读 1815
ASP截取中英文字符串函数
用ASP做网站的时候经常会碰到要截取字符串的情况。ASP中的Len函数不管是中文字符,还是英文字符,统统按一个单位来计算,由于一个中文字符的宽度是一个英文字符宽度的两倍,在中英文混合的情况下字符串实际占用的宽度就不好计算了,如果按照Len函数计算的长度来截取字符串截出来的效果也会长短不一,下面是按照一个汉字相当于两个英文字符来计算字符串长度和截取字符串的代码。...
技术 • 9年前 • 阅读 1847
解决dedecms织梦CMS登录后台一片空白的解决方法
今天将服务器上的PHP版本升级到最新后,发现有一个织梦CMS的网站后台进不去,输入用户名和密码进去后一片空白,也不显示错误,后来在网上找到解决方法,拿来做个备忘。...
技术 • 10年前 • 阅读 1421
  • 网页配色表
  • 二维码生成器
  • 整数分区计算器
  • 随机密码生成器
  • 金额大写转换
Copyright © 2023 HTMer.com⋅苏ICP备08003082号-1⋅ 苏公网安备32041202002242⋅Powered By Z-Blog
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
标签
软件技巧 Windows 源代码 主机 Office 浏览器 腾讯 科普资讯 数据库 病毒防护 节日 下载 远程桌面 Google 心情 足球 PS 健康 电影 音乐 百度 Apple 阿里巴巴 Z-Blog 播放器 微信 阿里云盘 VMware
关于我

研究互联网络和电脑应用技术的IT技术网

HTMer简介