这是一个创建于 4395 天前的主题，其中的信息可能已经有所发展或是发生改变。
我承认，看到瀑布流有很多同学会吐槽 !-__-
现在是用的jquery.Masonry，用下来发现有点问题：
1、如果图片加载很慢，这个布局就惨不忍睹了，即使配合imagesLoaded效果也不大好。
2、不知道http://pinsta.me/是怎么做到的，它的加载效果就不错。
3、如果jquery.Masonry配合imagesLoaded可以达到2的效果，那请看下面的网址，是不是有什么地方写错了。
因为前端太菜，所以想到这来找找答案。
地址：
http://instagcn.sinaapp.com
现在是用的jquery.Masonry，用下来发现有点问题：
1、如果图片加载很慢，这个布局就惨不忍睹了，即使配合imagesLoaded效果也不大好。
2、不知道http://pinsta.me/是怎么做到的，它的加载效果就不错。
3、如果jquery.Masonry配合imagesLoaded可以达到2的效果，那请看下面的网址，是不是有什么地方写错了。
因为前端太菜，所以想到这来找找答案。
地址：
http://instagcn.sinaapp.com
12 条回复 • 1970-01-01 08:00:00 +08:00
 |
1
chairo 2012-11-02 20:21:15 +08:00
提前获取到图片的宽高，用jquery.Masonry就不会惨不忍睹了。
参考俺之前做的一个图片站：http://heisi.au92.com |
 |
2
chone 2012-11-02 20:37:04 +08:00
可以先给个固定的高宽，等img.onload再设置为图片的高宽。
|
 |
3
yibin001 OP @chairo
<img width="200" height="200" src="http://distilleryimage9.s3.amazonaws.com/083f3bc224d511e282e122000a1f9aae_6.jpg" class="preview" alt="" lazy-src="http://distilleryimage9.s3.amazonaws.com/083f3bc224d511e282e122000a1f9aae_6.jpg" /> 图片的高度已经指定了，http://instagcn.sinaapp.com/，这里是可以看到的，所以我不明白是哪里的问题。 |
 |
4
AlloVince 2012-11-02 20:58:01 +08:00
$content.imagesLoaded(function(){
}); 把这一层去掉就行了。加上这个会等待图片加载完才布局 |
|
6
chairo 2012-11-02 21:11:11 +08:00
@yibin001 反正我的做法是有个脚本抓取图片时候就获得图片宽高，然后显示时候宽高按比例放大或者缩小。不需要$content.imagesLoaded一样可以做到页面不乱……
|
|
8
yibin001 OP @chairo 图片高宽我已经都指定了，不知道是不是跟要进行布局的dom里有其它元素有关，如不确定高度的评论列表。。。
|
 |
11
sd4399340 2012-11-03 19:37:04 +08:00
以前做过类似的项目 http://yingyong.taobao.com/show.htm?app_id=125002 （需要淘宝登陆）
布局用的 isotope http://isotope.metafizzy.co/ 貌似跟Masonry差不多 图片的预加载用的jquery的一个preloader插件，原理大概是不停的去check图片的comlete属性 |
Select Language