关闭

jQuery搭建简单的瀑布流页面

标签: jquery图片布局
633人阅读 评论(0) 收藏 举报
分类:

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

效果

食用方法:

1.加载js

使用该网格瀑布流布局需要引入jQueryjaliswall.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 class="article">
 <img src="tools/waterfall/img/3.jpg" />
 <h2>text</h2>
 </div>
 <div class="article">
 <img src="tools/waterfall/img/4.jpg" />
 <h2>text</h2>
 </div>
 <div class="article">
 <img src="tools/waterfall/img/5.jpg" />
 <h2>text</h2>
 </div>
···
<div>

3.引入css
需要为该瀑布流特效添加下面的一些必要的CSS样式。

* {
 margin: 0;
 padding: 0;
}

.article {
 display: block;
 margin: 0 0 30px 0;
 padding: 12px;
 background: white;
 border-radius: 3px;
 box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
 transition: all 220ms;
}
.article:hover {
 box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
 transform: translateY(-5px);
 transition: all 220ms;
}
.article > img {
 display: block;
 width: 100%;
 margin: 0 0 24px 0;
}
.article h2 {
 text-align: center;
 font-size: 14px;
 text-transform: uppercase;
 margin: 0 0 12px 0;
}

.wall {
 display: block;
 position: relative;
}
.wall-column {
 display: block;
 position: relative;
 /*width: 33.333333%;*/
 width: 25%;
 float: left;
 padding: 0 12px;
 box-sizing: border-box;
}
@media (max-width: 640px) {
 .wall-column {
 width: 50%;
 }
}
@media (max-width: 480px) {
 .wall-column {
 width: auto;
 float: none;
 }
}

@media screen and ( min-width: 48.9375em ) { /* 782px, mobile WP bar */
 .site-main {
 margin: 0 auto;
 }
 .content-area {
 float: none;
 width: 100%;
 max-width: 1500px;
 margin: 0 auto 3em;
 }
 #infinite-footer .container {
 padding: 0;
 width: 700px !important;
 }

其中.wall-columnwidth属性用于控制每行显示多少列,例如,要想每行显示3列,可以设置为width:33.333333%。
上面的内容在style.css中,另外,需要同时引入normalize.css文件

<link rel="stylesheet" type="text/css" href="tools/waterfall/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="tools/waterfall/css/styles.css">

4.启动脚本代码
在页面中启用瀑布流形式的脚本代码

<script type="text/javascript">
 $(function(){
 $('.wall').jaliswall({ item: '.article' });
 });
 </script>

下载:

github

关于使用七牛云存储的压缩:

因为将图片上传到了七牛中,没有进行压缩,一个界面达到了惊人的65.8MB ❗
比如一开始这张图片:

https://o7rr4q40i.qnssl.com/trip_FullSizeRender(44).jpg

大小:1.0 MB 分辨率:width: 3024,height: 3024

单是一张图片就达到了1MB,严重影响到了加载速度。

后来想到使用imageView2或者imageMogr2接口改变图片的分辨率,在图片的地址最后加入?imageMogr2/thumbnail/500x

https://o7rr4q40i.qnssl.com/trip_FullSizeRender(44).jpg?imageMogr2/thumbnail/500x

大小:71.3KB 分辨率:width: 500,height: 500

这样,图片的加载就快了很多,只需要将href链接到原图地址就可以获得高分辨率的图像咯~

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:217326次
    • 积分:5235
    • 等级:
    • 排名:第5202名
    • 原创:303篇
    • 转载:4篇
    • 译文:0篇
    • 评论:145条
    博客

    这是我的个人博客Coda

    会和大家分享很多好玩的开源作品

    微信公众号

    这是我的微信公众号

    mayu_stack

    我会在上面与大家分享各种有趣的事物


    最新评论