masonry ajax瀑布流,基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局

╰半夏微凉° 2022-09-03 11:11 305阅读 0赞

周末研究了一下 Jquery 的两个实现瀑布流的插件，一个是 WookMark 一个就是 Masonry。其中前者专门为了实现图片瀑布流功能，而后者则是为了实现 div 的瀑布流布局排列。

都试了一下之后，选择了 Masonry 插件，因为对 html 结构的要求更低，实现起来逻辑看着更清楚。其中

HTML 代码：

![c33bd5a9919c5918e5da2ec2cd136149.png][]

描述文字

![085434Ux1.jpg][]

描述文字

![0854344IU.jpg][]

描述文字

![085435b8u.jpg][]

描述文字

![085435au0.jpg][]

描述文字

![0854368VF.jpg][]

描述文字

![085436aLd.jpg][]

描述文字

CSS 代码：

.items \{

width: 195px;

margin: 0 8px 14px 0;

text-align:center;

padding: 10px;

float: left;  // 必须要有，使 div 先横向排列，然后 Masonry 插件才能生效

display: none; // 优化显示需求

border: 1px solid \#DDD;

background: \#EEE;

\-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .3);

\-webkil-box-shadow:0 1px 3px rgba(0, 0, 0, .3);

box-shadow:0 1px 3px rgba(0, 0, 0, .3);

.items img \{

width: 185px;

CSS 代码中，必须的就是对元素 float 的描述，其次 display 默认为不可见，为了能够在图片加载之后再显示出来，使得用户体验更好。同时使用了一些 css3 的属性，声明了每个“砖块”的阴影。

JS代码：

$(document).ready(

function() \{

var container = $('\#images .items');

var masonryContainer = $('\#images');

container.imagesLoaded(function()\{

container.fadeIn();

masonryContainer.masonry(\{

itemSelector : '.items',

isAnimated: true,

\});

);

JS 代码在页面加载完成后执行，同时，使用了 imagesloaded 插件，来在砖块元素图片加载完成后再调用 masonry 插件。调用 masonry 的元素应该是所有 items 最外层的元素，而同时判断了所有 items 元素图片加载成功之后才将元素显示出来。

Masonry 主页：http://masonry.desandro.com/

在线预览：http://yunland.sinaapp.com/mark

这个演示中用到了 imagesLoaded 插件实现了图片加载完成的回调，同时在 masonry 页面中无限滚动的 example 中还涉及到一个无限翻页的插件，这些小巧的 jquery 插件都为我们的前端页面工作提供了很便利的条件。在之后的工作中说不定就可以用到。

[c33bd5a9919c5918e5da2ec2cd136149.png]: /images/20220829/19df3e8ca17545bf9e1c36553cee7579.png
[085434Ux1.jpg]: /images/20220829/79b3439850624e2684f0ac01a1ffa827.png
[0854344IU.jpg]: /images/20220829/ad783bbd2a5148069e5a577f1c9cd1ce.png
[085435b8u.jpg]: /images/20220829/abe971eccd304450ab603be7f03b5a01.png
[085435au0.jpg]: /images/20220829/ae207c1c359a4962b1318c575e8d56f2.png
[0854368VF.jpg]: /images/20220829/560e08df7b7c4eba8c6c9a774e4354ac.png
[085436aLd.jpg]: /images/20220829/6e4cb87a3f5740f0a632e213802fd7e6.png