jQuery动态网格瀑布流插件Masonry
2024-10-19 01:33:06
Masonry是一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发瀑布流界面效果。和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则先垂直再横向排列元素，将下一个元素放置到上一个元素底部的网格中的下一个开发区域。这种效果可以最小化处理不同高度的元素在垂直方向的间隙。
在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使用Masonry处理后，间隔变小。
使用方法
引入核心文件库
|
1
2
|
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script><script src="jquery.masonry.min.js"></script> |
构建html元素
|
1
2
3
4
5
6
|
<div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ...</div> |
写入CSS样式
|
1
2
3
4
5
|
.item { width: 220px; margin: 10px; float: left;} |
写入JS初始化插件
|
1
2
3
4
5
6
7
|
$(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 });}); |
如果你加载的元素中有图片的话，那么需要确保Masonry在所有图片都加载完后才执行，调用如下代码
|
1
2
3
4
5
6
7
|
var $container = $('#container');$container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 });}); |
不使用jquery方法
使用js初始化
|
1
2
3
4
5
6
|
var container = document.querySelector('#container');var msnry = new Masonry( container, { // options... itemSelector: '.item', columnWidth: 200 }); |
使用html初始化
目标元素添加js-masonry的样式类，所能的选项值可以以josn格式赋值给data-masonry-options。
|
1
2
3
4
|
<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'> <div class="item"></div> <div class="item"></div> ...</div> |
更多参数设置请参考官文档
转载请注明：jQ酷 » jQuery动态网格瀑布流插件Masonry
最新文章
- 现代3D图形编程学习-基础简介(1) (译)
- Python SQLAlchemy --3
- postfix启动失败
- Unity3d5.0 新UI之2048
- javascript高级程序设计---Event对象三
- BestCoder Round #68 (div.2)
- Qt 制作安装包
- 一、JPEG文件格式-----压缩框架
- 用Spring3编写第一个HelloWorld项目
- LeetCode 278
- git add和被ignore的文件
- 老李推荐：第8章1节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-运行环境初始化
- How To Configure VMware fencing using fence_vmware_soap in RHEL High Availability Add On（RHEL Pacemaker中配置STONITH）
- 日常API之百度翻译
- mondrian 4.7 源码部署
- vue 双向绑定 数据修改但页面没刷新
- VScode-Common-Shortcut
- html 提取 公用部分
- 最佳实践：腾讯HTAP数据库TBase助力某省核心IT架构升级
- Codeforces 884C.Bertown Subway ----判环，思路