Masonry – 实现 Pinterest 模式的网格砌体布局
模式 实现 布局 网格
2023-09-27 14:26:16 时间
Masonry 是一款 JavaScript 网格布局插件,可以实现类似 Pinterest 模式的砌体布局效果。通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样。这个库还可以作为 jQuery 插件使用,帮助你轻松实现这种效果。
您可能感兴趣的相关文章
在使用的时候,HTML代码很简单:
<div id="container"> <div class="item">...</div> <div class="item w2">...</div> <div class="item">...</div> ... </div>
另外在页面中还需引入:
<script src="/path/to/masonry.pkgd.min.js"></script>
下面是简单的 CSS 代码示例:
.item { width: 25%; } .item.w2 { width: 50%; }
如果当普通的 JavaScript 库使用,代码如下:
var container = document.querySelector('#container'); var msnry = new Masonry( container, { // options columnWidth: 200, itemSelector: '.item' });
如果作为 jQuery 插件使用,代码如下:
var $container = $('#container'); $container.masonry({ columnWidth: 200, itemSelector: '.item' });
可以通过如下方式获取 Masonry 实例:
var msnry = $container.data('masonry');
相关文章
- 事件驱动IO模式(图解+秒懂+史上最全)
- 安卓逆向_17 --- IDA 动态调试【 环境搭建、so库调试【动态普通、动态debug模式】、JNI_OnLoad调试分析、java_ 开头函数分析】
- ARM工作模式
- 演练:实现支持基于事件的异步模式的组件
- Mnogo单节点 Docker模式安装
- Java描述设计模式(11):观察者模式
- 【23种设计模式】建造者模式(Builder Pattern) .Net Core实现
- 【23种设计模式】装饰模式(Decorator Pattern) .Net Core实现
- 【23种设计模式】原型模式(Prototype Pattern) .Net Core实现
- 【23种设计模式】组合模式(Composite Pattern) .Net Core实现
- debug模式下dlgdata.cpp line 43 断言失败
- C#,字符串匹配(模式搜索)RK(Rabin Karp)算法的源代码
- Samba 系列(五):将另一台 Ubuntu DC 服务器加入到 Samba DC 实现双域控主机模式
- 并发编程 - 单例模式讲解
- 一文带你理解 RocketMQ 广播模式实现机制
- java实现23种设计模式-观察者模式
- 19使用推模式和拉模式实现电梯超重报警
- 《Android 源码设计模式解析与实战》——第2章,第2.6节单例模式的其他实现方式
- Java设计模式:代理模式
- Swift - 单例模式的实现
- RGB HSV HLS三种色彩模式转换(C语言实现)
- 配置Tomcat apr运行模式
- Perl的IO操作(2):更多文件句柄模式
- OKHttp原理讲解之责任链模式及扩展
- 以Debug模式启动JBoss
- 代理模式和php实现
- 跟屌丝大哥学习设计模式--生成器模式(Builder)
- 设计模式详解:Decorator(装饰模式)
- C#设计模式 之 单例模式
- php实现工厂模式
- 简述C/S和B/S模式的区别
- 单片机根据应答发送AT指令控制ESP8266设置为服务器—AP模式