Justified 基于 jQuery 的相册展示插件 - 文章教程

Justified 基于 jQuery 的相册展示插件

发布于 2018-06-20 字数 1906 浏览 2060 评论 0

Justified Gallery 是一个 jQuery 的相册展示插件,图片会自动填满整个页面空间,现在很多网站都采用这种方式展示图片,比如 Google、百度图片、500px 等,这种方式看起来比较整齐,感觉比瀑布流更优雅。

Justified 基于 jQuery 的相册展示插件

对于一个站长来说,如果你有很多图片,你得考虑如何布局这些图片,让他们看起来好看优雅,像 500px、Google 图片、百度图片那样整齐的显示图片,通过 Justified 你也可以做出这样的效果。

使用方法

Justified 需要一系列整齐的链接标签,链接里面放置缩略图,链接指向原始的图片地址

<div id="mygallery" >
<a href="path/to/myimage1_original.jpg">
<img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
</a>
<a href="path/to/myimage2_original.jpg">
<img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
</a>
<!-- other images... -->
</div>

引入我们需要的 jQuery 和 Justified 文件

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

现在你只需要调用插件,即可将所有图片排列的很整齐,在这种情况下,我们使用默认选项。

$("#mygallery").justifiedGallery();

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论