lycorisradiata

jquery.masonry.min.js--瀑布流排版
入门HTML引用 Masonry 文件<script src="/js/masonry.pkgd....
扫描右侧二维码阅读全文
03
2018/09

jquery.masonry.min.js--瀑布流排版

入门

HTML
引用 Masonry 文件

<script src="/js/masonry.pkgd.min.js"></script>
<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ...
 </div>

CSS
所有项目大小都由CSS处理。

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

用jQuery初始化
你可以使用Masonry作为jQuery插件: $('selector').masonry();

  $('.grid').masonry({
     // options
     itemSelector: '.grid-item',
     columnWidth: 240
  });

更多参数:

 $(function(){
   $('.grid').masonry({
     // options 设置选项
     itemSelector : '.item', //子类元素选择器
     columnWidth : 240 ,//一列的宽度 ,包括边距 220+10+10
     isAnimated:true, //使用jquery的布局变化,是否启用动画效果
     animationOptions:{
     //jquery animate属性 ,动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
     },
     gutterWidth:15,//列的间隙
     isFitWidth:true,//自适应宽度
     isResizableL:true,// 是否可调整大小
     isRTL:false,//使用从右到左的布局
   });
 });

图片加载完后再调用:

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

官网下载:
http://masonry.desandro.com/

Last modification:November 30th, 2018 at 04:02 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment