This topic created in 4937 days ago, the information mentioned may be changed or developed.
我承认，看到瀑布流有很多同学会吐槽 !-__-
现在是用的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 replies • 1970-01-01 08:00:00 +08:00
 |
1
chairo Nov 2, 2012
提前获取到图片的宽高，用jquery.Masonry就不会惨不忍睹了。
参考俺之前做的一个图片站：http://heisi.au92.com |
 |
2
chone Nov 2, 2012
可以先给个固定的高宽，等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 Nov 2, 2012
$content.imagesLoaded(function(){
}); 把这一层去掉就行了。加上这个会等待图片加载完才布局 |
|
6
chairo Nov 2, 2012
@yibin001 反正我的做法是有个脚本抓取图片时候就获得图片宽高，然后显示时候宽高按比例放大或者缩小。不需要$content.imagesLoaded一样可以做到页面不乱……
|
 |
11
sd4399340 Nov 3, 2012
以前做过类似的项目 http://yingyong.taobao.com/show.htm?app_id=125002 （需要淘宝登陆）
布局用的 isotope http://isotope.metafizzy.co/ 貌似跟Masonry差不多 图片的预加载用的jquery的一个preloader插件，原理大概是不停的去check图片的comlete属性 |
Select Language