转:jQuery插件之Wookmark:流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案
谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js:
1.
<
script
src
=
"/js/jquery-1.10.2.min.js"
></
script
>
2.
<
script
src
=
"js/jquery.wookmark.min.js"
></
script
>
因为Wookmark是基于jQuery编写的插件,自然是少不了jQuery.js文件且必须在wookmark.js之前已入,否则将会报错。
接着就是html内图片容器的布局讲究了:
1、容器需要指定position为relative相对位置;
2、必须指定图片的高度和宽度;
示例代码如下所示:
01.
<
div
class
=
"example"
>
02.
<
div
id
=
"main"
role
=
"main"
>
03.
<
ul
id
=
"tiles"
>
04.
<!-- These are our grid blocks -->
05.
<
li
><
img
src
=
"img/image_1.jpg"
width
=
"200"
height
=
"283"
><
p
>1</
p
></
li
>
06.
<
li
><
img
src
=
"img/image_2.jpg"
width
=
"200"
height
=
"300"
><
p
>2</
p
></
li
>
07.
<
li
><
img
src
=
"img/image_3.jpg"
width
=
"200"
height
=
"252"
><
p
>3</
p
></
li
>
08.
<
li
><
img
src
=
"img/image_4.jpg"
width
=
"200"
height
=
"158"
><
p
>4</
p
></
li
>
09.
<
li
><
img
src
=
"img/image_5.jpg"
width
=
"200"
height
=
"300"
><
p
>5</
p
></
li
>
10.
<
li
><
img
src
=
"img/image_6.jpg"
width
=
"200"
height
=
"297"
><
p
>6</
p
></
li
>
11.
<
li
><
img
src
=
"img/image_7.jpg"
width
=
"200"
height
=
"200"
><
p
>7</
p
></
li
>
12.
<
li
><
img
src
=
"img/image_8.jpg"
width
=
"200"
height
=
"200"
><
p
>8</
p
></
li
>
13.
<
li
><
img
src
=
"img/image_9.jpg"
width
=
"200"
height
=
"398"
><
p
>9</
p
></
li
>
14.
<
li
><
img
src
=
"img/image_10.jpg"
width
=
"200"
height
=
"267"
><
p
>10</
p
></
li
>
15.
<
li
><
img
src
=
"img/image_1.jpg"
width
=
"200"
height
=
"283"
><
p
>11</
p
></
li
>
16.
<
li
><
img
src
=
"img/image_2.jpg"
width
=
"200"
height
=
"300"
><
p
>12</
p
></
li
>
17.
<
li
><
img
src
=
"img/image_3.jpg"
width
=
"200"
height
=
"252"
><
p
>13</
p
></
li
>
18.
<
li
><
img
src
=
"img/image_4.jpg"
width
=
"200"
height
=
"158"
><
p
>14</
p
></
li
>
19.
<
li
><
img
src
=
"img/image_5.jpg"
width
=
"200"
height
=
"300"
><
p
>15</
p
></
li
>
20.
<
li
><
img
src
=
"img/image_6.jpg"
width
=
"200"
height
=
"297"
><
p
>16</
p
></
li
>
21.
<
li
><
img
src
=
"img/image_7.jpg"
width
=
"200"
height
=
"200"
><
p
>17</
p
></
li
>
22.
<
li
><
img
src
=
"img/image_8.jpg"
width
=
"200"
height
=
"200"
><
p
>18</
p
></
li
>
23.
<
li
><
img
src
=
"img/image_9.jpg"
width
=
"200"
height
=
"398"
><
p
>19</
p
></
li
>
24.
<
li
><
img
src
=
"img/image_10.jpg"
width
=
"200"
height
=
"267"
><
p
>20</
p
></
li
>
25.
<
li
><
img
src
=
"img/image_1.jpg"
width
=
"200"
height
=
"283"
><
p
>21</
p
></
li
>
26.
<
li
><
img
src
=
"img/image_2.jpg"
width
=
"200"
height
=
"300"
><
p
>22</
p
></
li
>
27.
<
li
><
img
src
=
"img/image_3.jpg"
width
=
"200"
height
=
"252"
><
p
>23</
p
></
li
>
28.
<
li
><
img
src
=
"img/image_4.jpg"
width
=
"200"
height
=
"158"
><
p
>24</
p
></
li
>
29.
<
li
><
img
src
=
"img/image_5.jpg"
width
=
"200"
height
=
"300"
><
p
>25</
p
></
li
>
30.
<
li
><
img
src
=
"img/image_6.jpg"
width
=
"200"
height
=
"297"
><
p
>26</
p
></
li
>
31.
<
li
><
img
src
=
"img/image_7.jpg"
width
=
"200"
height
=
"200"
><
p
>27</
p
></
li
>
32.
<
li
><
img
src
=
"img/image_8.jpg"
width
=
"200"
height
=
"200"
><
p
>28</
p
></
li
>
33.
<
li
><
img
src
=
"img/image_9.jpg"
width
=
"200"
height
=
"398"
><
p
>29</
p
></
li
>
34.
<
li
><
img
src
=
"img/image_10.jpg"
width
=
"200"
height
=
"267"
><
p
>30</
p
></
li
>
35.
<!-- End of grid blocks -->
36.
</
ul
>
37.
</
div
>
38.
</
div
>
接着就是当所有页面元素渲染完毕过后调用流布局的方法,如下所示:
01.
(
function
($){
02.
var
handler = $(
'#tiles li'
);
03.
04.
handler.wookmark({
05.
// Prepare layout options.
06.
autoResize:
true
,
// This will auto-update the layout when the browser window is resized.
07.
container: $(
'#main'
),
// Optional, used for some extra CSS styling
08.
offset: 5,
// Optional, the distance between grid items
09.
outerOffset: 10,
// Optional, the distance to the containers border
10.
itemWidth: 210
// Optional, the width of a grid item
11.
});
12.
13.
// Capture clicks on grid items.
14.
handler.click(
function
(){
15.
// Randomize the height of the clicked item.
16.
var
newHeight = $(
'img'
,
this
).height() + Math.round(Math.random() * 300 + 30);
17.
$(
this
).css(
'height'
, newHeight+
'px'
);
18.
19.
// Update the layout.
20.
handler.wookmark();
21.
});
22.
})(jQuery);
只要一句:wookmark()即可调用流布局,插件会自动根据容器内图图片容器的大小个数计算每一个容器的绝对位置(top、left)值和width和height值,从而达到每一张图片非常完美地呈现出来,且成一种水流一样的均匀垂直分布。
问题暴露:
1、当我们的站点访问资源速度很慢的情况下,你会发现最终呈现出来的流布局会有一些瑕疵,也就是尾部有一些图片容器发生了相互重叠的现象。
问题分析:
1、问题根源在于图片资源请求过慢,倒是插件无法获得图片的准确height和width值,从而导致了计算其position为absolute的情况下的top值不够准确,最后出现了图片相互重叠的情况。这个时候,让你改变窗体大小的情况下重新去调用一下wookmark() 将会发现重新的布局非常完美。因为这个时候图资源已经全部获取到了的。
问题解决办法:
1、既然是图片资源尚未完全加载的情况下出现的问题,那么我们就何不等待所有图片资源都加载完毕过后在执行流布局呢?
这个时候我们想到了jQuery的另外一个插件jquery.imagesloaded
这个插件就是用于等待和监听页面内所有图片资源全部加载完毕,我们可以直接这样下载这个插件的js:http://code.ciaoca.com/jquery/wookmark/demo/js/jquery.imagesloaded.js
这个js文件需要引入在jQuery之后wookmark之前
1.
<
script
src
=
"/js/jquery-1.10.2.min.js"
></
script
>
2.
<
script
src
=
"js/jquery.imagesloaded.js"
></
script
>
3.
<
script
src
=
"js/jquery.wookmark.min.js"
></
script
>
接着我们就是调用imagesloaded监听加载完毕过后的状态然后调用流布局,代码如下所示:
01.
(
function
($) {
02.
var
loadedImages = 0,
// Counter for loaded images
03.
handler = $(
'#tiles li'
);
// Get a reference to your grid items.
04.
05.
// Prepare layout options.
06.
var
options = {
07.
autoResize:
true
,
// This will auto-update the layout when the browser window is resized.
08.
container: $(
'#main'
),
// Optional, used for some extra CSS styling
09.
offset: 5,
// Optional, the distance between grid items
10.
outerOffset: 10,
// Optional, the distance to the containers border
11.
itemWidth: 210
// Optional, the width of a grid item
12.
};
13.
14.
$(
'#tiles'
).imagesLoaded(
function
(){
15.
// Call the layout function.
16.
handler.wookmark(options);
17.
18.
// Capture clicks on grid items.
19.
handler.click(
function
(){
20.
// Randomize the height of the clicked item.
21.
var
newHeight = $(
'img'
,
this
).height() + Math.round(Math.random() * 300 + 30);
22.
$(
this
).css(
'height'
, newHeight+
'px'
);
23.
24.
// Update the layout.
25.
handler.wookmark();
26.
});
27.
}).progress(
function
(instance, image) {
28.
// Update progress bar after each image load
29.
loadedImages++;
30.
if
(loadedImages == handler.length)
31.
$(
'.progress-bar'
).hide();
32.
else
33.
$(
'.progress-bar'
).width((loadedImages / handler.length * 100) +
'%'
);
34.
});
35.
})(jQuery);
imagesLoaded(function(){}); 这样就表示图片资源全部加载完毕的状态监听了的。
这样一来,我们就彻底解决了流布局当图片资源请求过慢导致图片相互重叠的问题了的。
转:jQuery插件之Wookmark:流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案的更多相关文章
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。
瀑布流布局插件, 类似于 Pinterest.花瓣.发现啦. En 中文 文档 下载 下载waterfall插件最新版本. 使用 html: <div id="container&qu ...
- 响应式流布局插件DyLay
jQuery插件-Dylay,流布局我们前面介绍过很多,但这个流布局jQuery插件不同的是它的动画效果很不错,大家可以尝试使用下.另外<有用的jQuery布局插件推荐>这篇文章中有好几个 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
- 20款jQuery 的音频和视频插件
分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- jQuery插件 -- 动态事件绑定插件jquery.livequery.js
http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- ubuntu下配置华为交换机s2016
因为笔记本没有RS232口,只有装有ubuntu的服务器上有RS232口,于是登录ubuntu 配置连接. 这里使用minicom,当然,Ubuntu源还有个图形界面的gtkterm, cutecom ...
- html转译字符 字符实体
http://www.w3school.com.cn/html/html_entities.asp http://www.w3school.com.cn/tags/html_ref_entities. ...
- tornado url配置
Note tornado是支持虚拟主机的,在同一端口上根据域名区分app http://www.tornadoweb.org/en/stable/web.html#application-config ...
- Kafka部署与代码实例(转)
来自:http://doc.okbase.net/QING____/archive/19447.html 也可参考: http://blog.csdn.net/21aspnet/article/det ...
- python 解析top文件格式
top - 16:14:35 up 2 days, 3:04, 7 users, load average: 2.22, 1.84, 1.77 Tasks: 512 total, 2 running, ...
- CentOS卸载Oracle 11gR2(x64)
环境 OS: CentOS 7.4; hosts: L134; IP: 192.168.1.134 Oracle安装文件目录:/opt/oracle_install ORACLE_BASE:/data ...
- Multitenant Architecture---PDB与CDB
一.多租户框架 多租户技术(英语:multi-tenancy technology)或称多重租赁技术,是一种软件架构技术,它是在探讨与实现如何于多用户的环境下共用相同的系统或程序组件,并且仍可确保各用 ...
- python之实现ftp上传下载代码(含错误处理)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之实现ftp上传下载代码(含错误处理) #http://www.cnblogs.com/kait ...
- centos7 计划任务 crontab的使用
#vim /etc/crontab #号代表以管理员身份运行. 将你要执行的脚本或者命令加进去,例如我的: SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr ...
- selenium 定制启动 chrome 的选项
序 使用 selenium 时,我们可能需要对 chrome 做一些特殊的设置,以完成我们期望的浏览器行为,比如阻止图片加载,阻止JavaScript执行 等动作.这些需要 selenium的 Chr ...