瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果。就像我们现在要介绍的三大利器(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. Informatica 常用组件Source Qualifier之九 创建SQ转换

    可以配置 Designer 在您将源拖到映射中时默认创建源限定符转换,您也可以手动创建源限定符转换. 默认创建源限定符转换 可以配置 Designer 在您将源拖到映射中时自动创建一个源限定符转换. ...

  2. [转贴] 数字证书及 CA 的扫盲介绍

    [略有删节] 为了达到普及的效果,俺会尽量用比较浅显,非技术的语言来讲清楚. ★先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿.   ◇普通的介绍信 想必大伙 ...

  3. [置顶] IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...

  4. Boosted Tree

    原文:http://www.52cs.org/?p=429 作者:陈天奇,毕业于上海交通大学ACM班,现就读于华盛顿大学,从事大规模机器学习研究. 注解:truth4sex  编者按:本文是对开源xg ...

  5. iOS8开发~Swift(二)Playground

    一.Playground介绍 Playground是Xcode6中自带的Swift代码开发环境.俗话说"功欲善其事,必先利其器".曾经在Xcode5中编写脚本代码.比如编写JS.其 ...

  6. linux 硬连接与软连接

    1.linux中文件占用一个inode,inode指向文件内容.2.文件名可以认为是一个指针,指向inode.硬连接相当于指针的整体拷贝,并不是对文件内容的拷贝.两个文件名(两个指针)都能修改文件,删 ...

  7. Opencv2.4.9安装和在visualstudio 2013中配置

    Opencv2.4.9安装和在visualstudio 2013中配置 下载opencv和在windows下安装: 最新版本号的opencv是2014.4.25的opencv2.4.9,这里选择当前最 ...

  8. Objective-C中NSString与int和float的相互转换

    NSString *tempA = @"123"; NSString *tempB = @"456"; 1,字符串拼接 NSString *newString ...

  9. 在网页浏览器中原生显示PDF文件

    在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...

  10. 在VC中创建DLL文件的方法步骤

    一.Win32动态链接库 1.制作的步骤: (1)新建WIN32 Dynamic-link Library工程,工程名为MyDll,选择A simple DLL project类型. (2)MyDll ...