Masonry实现JS瀑布流

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

KDDA

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

阅读量5.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签：瀑布流 JS

本文链接：https://blog.youkuaiyun.com/Dream_On_324/article/details/50577872

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用Masonry插件在网页端实现瀑布流布局效果，包括引入Masonry文件、编写HTML结构与样式、初始化插件及参数配置等关键步骤。

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

瀑布流布局在很多网站都有应用，也是从国外流行起来的一种不规则布局，想要在网页端实现瀑布流效果可以借用Masonry插件。

一、引入Masonry文件

可以去官网下载到本地，也可以直接引入CDN，还可以用npm等包管理工具直接下载。此处用CDN引入。

官网地址：http://masonry.desandro.com

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>

二、编写html结构和样式

<div id="container">
  <div class="item">
    <img src="touxiang-@3x.png">
  </div>
  <div class="item">
    <img src="test.png">
  </div>
  <div class="item">
    <img src="touxiang-@3x.png">
  </div>
  <div class="item">
    <img src="test.png">
  </div>
  <div class="item">
    <img src="touxiang-@3x.png">
  </div>
  <div class="item">
    <img src="test.png">
  </div>   
</div>

<style>
    #container{
      margin: 0 auto;
      background: red;
    }
    .item{
      /*width: 100px;*/     /* 控制每个图片宽度 */
      margin: 2px;
    }
</style>

三、初始化插件

$('#container').masonry({
    itemSelector: '.item',
    isAnimated: true,
    // columnWidth: 450,     
    isFitWidth: true     // 自适应宽度
  });

下面介绍下主要参数：

itemSelector class选择器,默认'.item'，这个表示每个块的选择器

columnWidth 一列的宽度

isAnimated 使用jquery的布局变化,默认true

animationOptions animate属性渐变效果(Object { queue: false, duration: 500 })

gutterWidth 列的间隙 Integer

isFitWidth 自适应浏览器宽度Boolean

isResizableL 是否可调整大小 Boolean

isRTL 使用从右到左的布局 Boolean

一般只需要用到：itemSelector、isFitWidth即可。先将每个需要自适应的元素放入div，并给定样式，此处是item。通过css可以控制每个item的宽度。

isFitWidth默认为false，开启后容器container将使用自适应宽度。然后用css控制居中margin:0 auto;即可。