BlocksIt 瀑布流插件使用教程

时间:13-06-14 栏目:技术 作者:liva 评论:2 点击: 9,210 次

BlocksIt 瀑布流插件是基于jquery的,使用也非常简单,是为数不多的几款动态瀑布流插件之一。

官方网站:http://j.gs/2Gey

使用方法很简单:

1. 调用所需的js文件,js文件可以从上面的官方网站下载到。

2.) 调用插件

这个用法只是最基本的,但是直接按照官方的说明去做会有一些问题,比如如果你的图片大小在img标签中没有指定,瀑布流效果就不会有,每个img都是整齐排在那里,因为大小都是按照默认的统一的尺寸,只有img有大有小的时候,大小不统一才能出现瀑布流效果。

解决思路:图片先不显示,先将图片加载好,然后调用瀑布流插件将其显示出来,在图片加载中,有一些提示。

假设要瀑布流显示的内容都在id=container里面

#container默认css中display:none;

可以发现里面有个loading的标签,loading的代码如下:

这段代码是在图片加载时候显示的,加载好之后我们上面的代码会将这个div影藏的,顺便发一个加载时候的图片:
5-121204194037-50

5-121204194027-51

下面贴一个演示地址:http://www.yulepai.net/a/qiqudongwu/

声明: 本文由( liva )原创编译,转载请保留链接: BlocksIt 瀑布流插件使用教程

BlocksIt 瀑布流插件使用教程:目前有2 条留言

  1. 板凳
    Eric China Google Chrome Windows :

    典型的流逝布局daemon http://pinterest.com/

    2013-06-19 下午 11:18 [回复]
  2. 沙发
    Eric China Google Chrome Windows :

    http://masonry.desandro.com/ 这个也不错,有时间研究下。

    2013-06-19 下午 11:14 [回复]

发表评论


购物推荐

赞助商

© 2013 enjoydiy.com. Design by zijiao. 62 queries in 0.389 seconds, using 21.28MB memory