jQuery搭建简单的瀑布流页面

原创 2016年06月01日 18:24:52

最近把春假的照片进行了一些简单的整理,主题中的图片样式感觉好单调的说,于是利用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链接到原图地址就可以获得高分辨率的图像咯~

版权声明:本文为博主原创文章,未经博主允许不得转载,复制。

jQuery简单的瀑布流

doctype html> html> head> meta charset="UTF-8"> title>简易瀑布流(基于多栏列表流体布局实现)title> style ty...

Jquery简单瀑布流代码示例. 仿开心网,蘑菇街

最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,仿开心网做一个瀑布流示例。  需要用到Jquery,jquery.masonry.min.js  演示地址:http...
  • yiwugou
  • yiwugou
  • 2012年12月18日 16:31
  • 707

php+jquery+ajax滚动条滚动到底部自动加载,简单实现瀑布流

php+jquery+ajax滚动条滚动到底部自动加载,简单实现瀑布流
  • hai7425
  • hai7425
  • 2017年07月20日 09:14
  • 382

iOS基础UI瀑布流界面简单搭建

UI瀑布流界面简单搭建

Recycleview实现复杂页面 三种以上布局 瀑布流 多布局 scrollview嵌套recyclerView 显示不全 滑动冲突 之进阶终极篇

Recycleview实现复杂页面 三种以上布局 瀑布流 多布局 scrollview嵌套recyclerView 显示不全 滑动冲突 之进阶终极篇...

页面布局瀑布流的写法(CSS写法)

瀑布流布局 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery搭建简单的瀑布流页面
举报原因:
原因补充:

(最多只允许输入30个字)