瀑布流排版-jquery.masonry.min.js使用说明

最新推荐文章于 2025-06-30 09:32:03 发布

Microi风闲

最新推荐文章于 2025-06-30 09:32:03 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：【JS】Jquery 文章标签：瀑布流

本文链接：https://blog.csdn.net/mss359681091/article/details/87865290

【JS】Jquery 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍Masonry布局插件的使用方法，包括基本设置、动画效果及响应式设计等高级功能，帮助开发者掌握该插件，实现动态网格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

简单用法：

<div id="container">
  <div class="item">...</div>
  ...
</div>
//CSS
.item { width: 220px; margin: 10px; float: left;}
//JS
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

更多参数：

$(function(){
  $('#container').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 $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

关于动画：动画只要把isAnimated:true就可以了，还可以设如animationOptions: {duration: 750, easing: 'linear',queue: false }来设置