jQuery Masonry
来源:互联网 发布:淘宝帐号注销2017 编辑:程序博客网 时间:2024/05/29 17:12
前陣子看到非常有趣的Waterfall瀑布流布局,可以先看一下有使用的網站如下。
- Pinterest:http://pinterest.com
- Wookmark:http://www.wookmark.com/
- 花瓣网:http://huaban.com/
今天來教大家怎麼自己做瀑布流不局的網頁,先給大家看一下完成的樣子Masonry DEMO
使用套件
- 名稱:jQuery Masonry
- 網站:http://masonry.desandro.com/
使用方法
1.首先要先載入需要的js
這邊的jquery需要的版本為1.4.0或者更新版本
2.html的結構如下
把一格一格要顯示的內容用class 為item的div包起來
3.CSS的部分設定
把每個item的寬度設定為一致,才有辦法排的漂亮,不然會有空隙,加一點margin讓每個item有點間隔,另外把float屬性設定為left。
4.javascript設定
這樣就會有基本的樣子了,看DEMO1。
展示圖片
如果在item中展示圖片的話,由於javascript開始執行的時候,圖片還沒有載入完全,導致高度上會錯亂,因此需要在javascript的地方使用imagesLoaded()來防止高度錯誤,讓網頁正確顯示,方法如下
這樣的話就可以在item中使用圖片,不會讓高度的計算上錯誤了。看DEMO2
使用動畫效果
剛剛的DEMO2中,當在縮放視窗的時候,每個item都是直接跳到新的位置,讓我們來幫他加點動畫效果,讓整個頁面看起來效果更好,要使用動畫效果有兩個方法
1.jquery方式:
在javascript中加上動畫效果參數,isAnimated: true, 這樣就可以了
按我看DEMO3
2.CSS transitions方式:
使用之前提到的css 3效果,在CSS的部分加入以下CSS即可,優點是效果較好,缺點是某些瀏覽器到目前為止還是沒有辦法支援,例如IE9876....
DEMO4
最後可以在自己發揮一下美化一下就可以得到如下的效果
DEMO5
其他的參數還請大家自己到官網看囉。
- jQuery Masonry
- jquery.masonry.js
- jquery.masonry瀑布流
- jquery.masonry插件怎么用
- jQuery瀑布流插件 Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- Masonry
- 检索模型及评价指标小结
- 算法导论-----二叉搜索树
- SQL TRACE 知识库
- 黑马程序员--Socket 套接字编程
- 详解python实现FP-TREE进行关联规则挖掘(带有FP树显示功能)附源代码下载(2)
- jQuery Masonry
- 算法导论-----红黑树
- 基于虚拟仪器的电子产品现代化生产测试解决方案
- delete和new
- VS2010 编译 google V8 引擎 为 dll
- 本文是关于使用C++调用Matlab编译生成的Dll的说明
- web.py中使用Jinja2问题汇总
- POI 控制 excel 生成图表的方式(二)
- 服务器设计系列:线程