注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery动态网格瀑布流插件Masonry

UI fishcity 2719浏览

Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果。和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonry则先垂直再横向排列元素,将下一个元素放置到上一个元素底部的网格中的下一个开发区域。这种效果可以最小化处理不同高度的元素在垂直方向的间隙。

在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小。

使用方法

引入核心文件库

<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>

构建html元素

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

写入CSS样式

.item {
  width: 220px;
  margin: 10px;
  float: left;
}

写入JS初始化插件

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

如果你加载的元素中有图片的话,那么需要确保Masonry在所有图片都加载完后才执行,调用如下代码

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

不使用jquery方法

使用js初始化

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options...
  itemSelector: '.item',
  columnWidth: 200
  });

使用html初始化

目标元素添加js-masonry的样式类,所能的选项值可以以josn格式赋值给data-masonry-options。

<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'>
  <div class="item"></div>
  <div class="item"></div>
  ...</div>

更多参数设置请参考官文档

转载请注明:jQ酷 » jQuery动态网格瀑布流插件Masonry

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。