Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下:
在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小。
用法
首先倒入类库,如下:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script><script src="/path/to/jquery.masonry.min.js"></script>
然后,针对元素容器执行masonry,如下:
$(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); });
html代码
<div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div>
.item { width: 220px; margin: 10px; float: left; }
如果你加载的元素中有图片的话,那么需要确保Masonry在所有图片都加载完后才执行,需要调用如下代码:
var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 }); });
相关推荐
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局,当点击查看更多链接,会切换到该项目的全屏幻灯片模式,在幻灯片模式下可以浏览所有的图片和信息。
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
jquery Masonry插件方砖布局图片与内容无限滚动加载
jQuery瀑布流插件masonry实现的瀑布流布局网页,很不错的瀑布流插件,采用lightbox插件放大展示图片,非常的漂亮的布局。
瀑流式布局,jquery Masonry,布局,列表布局,瀑流
这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。
Jquery网站瀑布流插件masonry是一款jquery.masonry插件。
jquery masonry瀑布流插件制作图片瀑布流布局代码
vue-masonry-wall一种纯粹的vue响应式砌体实现,无需直接进行dom操作,对ssr友好,并具有延迟附加功能。 我创建了这个becaus vue-masonry-wall,这是一个纯vue响应式砌体实现,无需直接进行dom操纵,对ssr友好并带有...
$ bower install jquery-masonry-autofill 用法 包含在jQuery之后。 < script src =" jquery.js " type =" text/javascript " > </ script > < script src =" masonry.js " type =" text/javascript...
React砌体组件IE8支持如果您希望获得IE8支持,那么带有React 0.14的v2是...基本用法npm install --save react-masonry-component import * as React from 'react' ;import Masonry from 'react-masonry-component' ;
Masonry布局插件
砌体 当前版本:0.12.0 用于砌块布局的Vue.js指令。 原始。 插件可用 :party_popper: , 该插件可以轻松地与不同CSS框架集成。 检查此 。 您还可以克隆基本的演示存储库 。用法通过NPM安装从npm获取: npm install ...
瀑流布局现在在很多大大小小的网站中都可以看到,可是你发现如果你想用是一件相当麻烦的事,今天有了Masonry 插件,给大家带来一个很大的惊喜,简单使用,轻量级应用。 类似的布局,似乎一夜之间出现在国内外大大...
代码简介:随着人们的视觉欣赏能力提高,网站建设中js特效占据了重要的地位,瀑布流效果可以解决自适应高度排列的难题。
masonry瀑布流布局滑动到底部加载更多demo
jQuery无限加载瀑布流插件masonry是一款基于masonry插件实现的jQuery无限加载瀑布流代码。