新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> JQUERY >> Masonry:一款很好用的jquery网页瀑布流布局插件

Masonry:一款很好用的jquery网页瀑布流布局插件

查看次数13773 发表时间2013-05-28 12:54:30

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等。通常,随着页面滚动条...

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐、漂亮!

官网插件下载地址以及详解地址: 
示例demo及文档说明:http://masonry.desandro.com/

图片高度BUG修正: 
由于网络传输的速度问题,当浏览器加载了dom,但是img图片还没有加载完毕,这个插件在计算图片高度和定位的时候,就会出错,在firefox和chrome中最为明显,尤其是google chrome。

原因:在chrome浏览器下测试,在图片加载过程中,img的宽度和高度均为0,而在IE下,则浏览器先给img设定了宽度和高度,所以这个插件在IE下使用正常,但在chrome会出错。而这个插件看了官方的image demo也是如此,box层并没有动态生成一个高度值把布局撑开。

解决办法就是先让所有的图片加载完毕,才执行一次masonry()方法。


(转发请注明转自:学PHP)    


  相关推荐



1楼 瀛?HPER说: 2014-02-03 07:54:37
!S!WCRTESTTEXTAREA000000!E!
2楼 瀛?HPER说: 2014-02-04 20:09:19
!S!WCRTESTTEXTAREA000000!E!
3楼 Tangela说: 2016-12-21 19:44:38
Wow! Talk about a posting knoinckg my socks off!
4楼 Ranessa说: 2016-12-22 05:59:51
Quite honestly, this just scares me. And saddens me. And then scares me again when I think of how it won’t be so much of an issue for ME to deal with, but that my girls (currently aged 8 and 10-1/2) will have to. There are issues that, though they swirl around me in society, I don’t struggle with, or feel particularly affected by, because I know what I believe. But when I think about how many years it’s taken me to get to the point I am now, I fear how my daughters may be deceived, tempted, and swayed along their way as they work at peizonalrsing their faith, KNOWING what they believe and why.
5楼 Ranessa说: 2016-12-22 06:00:07
Quite honestly, this just scares me. And saddens me. And then scares me again when I think of how it won’t be so much of an issue for ME to deal with, but that my girls (currently aged 8 and 10-1/2) will have to. There are issues that, though they swirl around me in society, I don’t struggle with, or feel particularly affected by, because I know what I believe. But when I think about how many years it’s taken me to get to the point I am now, I fear how my daughters may be deceived, tempted, and swayed along their way as they work at peizonalrsing their faith, KNOWING what they believe and why.

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: