今天分享一个轻量级的JS插件,这个插件是使用流行布局来展示图片的,这种排版方式特别适合展现大量图像的页面,如果你刚好有这样的需求,不妨试试今天的这个 Macy.js 插件。配置比较方便,用户可以自定义间距、列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的。
项目名称:Macy.js
项目地址:http://macyjs.com/
Step 1: 在页尾引入JS文件,(不能放在Header里哦)
- <script src="macy.js"></script>
Step 2: html结构
- <div id="macy-container">
- <div class="demo">
- <img src="aa.jpg" />
- </div>
- </div>
Step 3: 配置JS
- <script>
- var masonry = new Macy({
- container: '#macy-container',
- // 图像列表容器id
- trueOrder: false,
- waitForImages: false,
- useOwnImageLoader: false,
- debug: true,
- //设计间距
- margin: {
- x: 10,
- y: 10
- },
- //设置列数
- columns: 6,
- //定义不同分辨率(1200,940,520,400这些是分辨率)
- breakAt: {
- 1200 : {
- columns: 5,
- margin: {
- x: 23,
- y: 4
- }
- },
- 940 : {
- margin: {
- y: 23
- }
- },
- 520 : {
- columns: 3,
- margin: 3,
- },
- 400 : {
- columns: 2
- }
- }
- });
- </script>
来源: http://sc.chinaz.com/info/171121428200.htm