Masonry – 实现 Pinterest 模式的网格砌体布局

　　Masonry 是一款 JavaScript 网格布局插件，可以实现类似 Pinterest 模式的砌体布局效果。通过把元素自动填充在垂直的空白区域，就像墙上堆砌的石头一样。这个库还可以作为 jQuery 插件使用，帮助你轻松实现这种效果。

您可能感兴趣的相关文章

创意无限！一组网页边栏过渡动画【附源码下载】
真是好东西！13种非常动感的页面加载动画效果
你见过吗？9款超炫的复选框（Checkbox）效果
超赞！基于 Bootstrap 的响应式的后台管理模板
太赞了！超炫的页面切换动画效果【附源码下载】

　　在使用的时候，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, {// optionscolumnWidth: 200,itemSelector: '.item'
});

　　如果作为 jQuery 插件使用，代码如下：

var $container = $('#container');
$container.masonry({columnWidth: 200,itemSelector: '.item'
});

　　可以通过如下方式获取 Masonry 实例：

var msnry = $container.data('masonry');

源码下载效果演示

本文链接：Masonry – 实现 Pinterest 模式的网格砌体布局

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

Masonry – 实现 Pinterest 模式的网格砌体布局相关推荐

如何使用砌体在WordPress中添加Pinterest样式发布网格
This is a guest post by Josh Pollock 这是Josh Pollock的来宾帖子 The Pinterest-like grid display of posts ha ...
网格(grid)布局
目录概述使用网格布局水平垂直居中盒子基本使用 1. 定义一个网格 2. 操控列 3. 操控行 4. 网格间隙 5. 基于线号放置元素 6. 使用 grid-template-areas 属性放置 ...
从花瓣与堆糖看Pinterest模式在中国的可行性
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 编者按: ...
Pinterest模式：互联网新一轮热潮来临
Pinterest,Pin(图钉)+Interest(兴趣),一个以兴趣为基础的社交网站,以图片瀑布流展示图片的视觉社交网站.Pinterest的界面就像一面整整齐齐贴满各种图片的照片墙,家庭主妇.各 ...
超级强大的网格grid布局
超级强大的网格grid布局一.概述二.基本概念 1. 容器和项目 2.行和列 3.单元格 4.网格线三.容器属性 1. display 属性 2.grid-template-columns 属性 ...
html卡片布局按钮,Material Design风格动态网格卡片布局UI设计
这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果.在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果. 使用方 ...
java 网格布局管理器,Java使用网格组布局管理器
package com.han; import java.awt.Container; import java.awt.GridBagConstraints; import java.awt.Grid ...
Java GridBagLayout（网格包布局管理器）
概述 GridBagLayout(网格包布局管理器)是在网格基础上提供复杂的布局,是最灵活. 最复杂的布局管理器.GridBagLayout 不需要组件的尺寸一致,允许组件扩展到多行多列.每个 Gri ...
揭秘Pinterest模式生态：半年涌10家受困内容（转）
社交领域Facebook已成为互联网发展史上一朵奇葩,Pinterest正成为新秀,这些将社区化电商领入新的发展时代.这个领域的概貌如何?对广大创业者,以及大公司来说,进入的机会和风险在哪里? 腾讯科 ...

Masonry – 实现 Pinterest 模式的网格砌体布局

Masonry – 实现 Pinterest 模式的网格砌体布局相关推荐

最新文章

热门文章