jQuery搭建简单的瀑布流页面

最新推荐文章于 2023-05-29 23:38:41 发布

Hades_Dev

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发库文章标签： jquery 图片布局

本文链接：https://blog.youkuaiyun.com/mayuko2012/article/details/51558067

这篇博客介绍了如何利用jQuery创建一个简单的瀑布流布局，适用于照片展示。博主分享了实现瀑布流的步骤，包括加载jQuery库，设置HTML结构，引入CSS样式，以及启用JavaScript脚本。还提到了使用七牛云存储并利用其接口压缩图片以提高页面加载速度的问题。

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

最近把春假的照片进行了一些简单的整理，主题中的图片样式感觉好单调的说，于是利用jQuery写了这个瀑布流插件，并用在了画廊页面中。 ➡ 戳这里！
大体呢就是常见的瀑布流效果啦。

食用方法：

1.加载js

使用该网格瀑布流布局需要引入jQuery和jaliswall.js文件。

<script src="tools/waterfall/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="tools/waterfall/js/jquery-2.1.1.min.js"><\/script>')</script>
<script type="text/javascript" src="tools/waterfall/js/jaliswall.js"></script>

2.添加页面内容

该瀑布流特效使用一个<div>作为包裹容器，使用<a>元素来包裹图片和它的标题元素。

<div class="wall">
 <a class="article" >
 <img src="tools/waterfall/img/1.jpg" />
 <h2>text</h2>
 </a>
 <div class="article">
 <img src="tools/waterfall/img/2.jpg" />
 <h2>text</h2>
 </div>
 <div