瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果。就像我们现在要介绍的三大利器(masonry+imagesloaded+infinitescroll)即使它们是如此有效,却在马上要使用的时候让我们拿着如烫手山芋班很难真正达到我们想要的效果。

下面,我们从其原理来讲解它们的使用,以帮助你更好的发挥它的功效。但为了快速实现,我们不讲解它们的全部内容。

1. 合理的HTML布局是问题的基本 

在一些案例中,由于HTML布局的差错(特别是在WordPress中),导致无限拖的失败。我们来看看比较合理的HTML结构

<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
<div id="page-navi">...</div>

注意:上面的#container和#page-navi被分开,#container的任务就包含瀑布流列表,翻页的工作交给#page-navi来完成。

不少案例中,#container内的结构不规律,有一些杂项,甚至把#page-navi也放在里面,这是导致后面处理中出错的根源。

2. 存在图片时masonry+imagesloaded搭配使用 

在一些案例里面小白按照官网上给出的代码进行布局,结构发现图片重叠在了一起,于是小白慌张了,觉得是不是插件冲突啊,不可能官方代码也存在问题吧!是的,官方代码存在问题,因为小白没有读完官方的介绍,单纯看一小段代码就会有这个问题。

在图片出现在.item中时,我们必须等到图片加载完成再来执行masonry,否则masonry会按照图片还没加载的高度来给.item赋予高度,这结果可想而知,就是错乱感。

而使用imagesloaded则可以避免这种情况,imagesloaded会检查#container中的图片是否加载完成,只有当图片都加载完了,才会执行回调中的代码。所以,如果小白要想在存在图片的时候实现瀑布流,就必须等到图片加载完了再来使用masonry。当然,有些人不用imagesloaded,他们牛皮哄哄的使用window.load,但是这样的话会等很久很久,假如网速慢,图片加载了半天没有加载完,瀑布流就永远不会出来。所以,我在使用代码的时候都是这样使用的:

$('#container').imagesLoaded( function() {
new Masonry( document.getElementById('container'),{itemSelector:'.item'} );
});

这种用法非常奇怪,官方说你可以用jQuery的方法啦,可以用$('#container').masonry({itemSelector:'.item'});就可以啦但是你要这样思考,jQuery的$()是即时获取,一个node加载好就马上获取的,这可不是什么好事,就像ready和load一样有的时候ready好了,但是还没有load,这就是图片的情况!图片ready就是加载一个<img>标签,秒秒钟的事,但是要load却要花大把的时间和流量才行。

而如果你的列表中全部都是文字,那么就不用考虑这些了,因为文字真的就是ready可以完成的事。

3.让infinitescroll执行完,获得加载完的节点 

小白在使用infinitescroll的时候着急的很,希望马上就能无限拖了,但是有一个非常严肃的问题就是,你必须等到要加载的所有的内容都加载还了,甚至加载过来的图片也已经搞定了,才开始行动。就像上面那段代码一样,如果你加载过来了一堆图片,但是图片还没有load,仅仅是ready好了,你就开始执行masonry,那么重新加载masonry就会因为从后面一页抓取的图片还没有load,而无法确定.item的高度,最后有可能让这些新加载的.item跑到#container的顶部。我想这个情况绝大部分的小白都遇到过。

如果你深刻理解了这里,你就会觉得上面那段短短的,看上去奇怪的代码,是多么精妙。

把它放在infinitescroll的执行完回调函数中。

$('#container').infinitescroll({
navSelector : '#page-navi',
nextSelector : '#page-navi a.next',
itemSelector : '#container .item'
// .. 省去了其他参数
},function(arrayOfNewElems){
$(arrayOfNewElems).appendTo('#container');
$('#container').imagesLoaded( function() {
new Masonry( document.getElementById('container'),{itemSelector:'.item'} );
});
// .. 省去了其他动作
});

这样的一个逻辑就非常清晰了。

当然了,在infinitescroll中还有一个this比较难把握。我们虽然获得了arrayOfNewElems,但是没有获取整个DOM。官方提示这个时候this就是获取的整个DOM,但又马上提示1.5版本之后this仅仅是获取的DOM中的#container,让人有些纳闷。

官方地址:infinitescroll?masonry imagesloaded

jQuery瀑布流无限拖三大利器:masonry+imagesloaded+infinitescroll的更多相关文章

  1. jQuery瀑布流+无限加载图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  3. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  4. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  5. 瀑布流无限加载infinitescroll插件与masonry插件使用

    masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...

  6. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  7. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  8. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  9. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

随机推荐

  1. 【BZOJ】【1876】【SDOI2009】SuperGCD

    高精度+GCD 唔……高精gcd其实可以这么算: \[ GCD(a,b)= \begin{cases} a & b=0 \\ 2*GCD(\frac{a}{2},\frac{b}{2}) &a ...

  2. [转]VS2010快捷键

    VS2010的快捷键,后附VS2008的快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 ...

  3. mysql09---sql语句优化

    Sql语句本身的优化 问题是: 如何从一个大项目中,迅速的定位执行速度慢的语句. (定位慢查询) 首先我们了解mysql数据库的一些运行状态如何查询(比如想知道当前mysql运行的时间/一共执行了多少 ...

  4. Android studio导入开源项目

    前几天从github上下载一个开源项目,发现他并不是以前Eclipse那种的目录结构 而是最近在用到的android studio的文件目录.从上图中我们可以看到多次出现了gradle这个单词.And ...

  5. 笔记本wifi热点设置好后,手机连上但不能上网问题

    这个问题我遇到过,我的原因是因为电脑上装有安全防护软件360的原因 解决方法是:打开360-->找到功能大全中的流量防火墙-->打开局域网防护-->关闭局域网隐身功能,立刻解决了这个 ...

  6. HIVE部署安装(笔记)

    1.下载hive:wget http://mirrors.cnnic.cn/apache/hive/hive-0.12.0/hive-0.12.0.tar.gz2.解压hive安装文件 tar -zv ...

  7. rapidxml修改节点的值

    1.rapidxml修改节点的value,修改之后,序列化还是原来的值,具体原因是什么,要看rapidxml是怎么实现的.如下: void TestRapidXml() { ]; sprintf(xm ...

  8. hbase-0.94安装方法具体解释

    先决条件:     1)java环境,须要安装java1.6以上版本号     2)hadoop环境.因为HBase架构是基于其它文件存储系统的,因此在分布式模式下安装Hadoop是必须的,可是,假设 ...

  9. oracle connect nocycle

    select * from uc_staff_department_level t,uc_t_staff stwhere st.id=t.staff_idand t.department_id in ...

  10. 单页WEB应用(三),Chat聊天模块

    Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...