瀑布流搜集-白红宇

瀑布流搜集

阅读量：6591 次

发布时间：2019-06-24

本文共 2404 字，大约阅读时间需要 8 分钟。

参考网站：

各种优秀插件：

masonry.js官网

query.infinitescroll.js滚动官网

blog:

瀑布流排版-jquery.masonry.min.js使用说明

无限滚动条-jquery.infinitescroll.js使用说明

瀑布流与无限滚动条一起使用，双剑合璧

瀑布流

注：jquery.masonry.js 和 masonry官网的 masonry.pkgd.min.js 有区别,参数写法不同。经测试masonry.pkgd.min.js貌似不支持ie6，jquery.masonry.js支持ie6.


     瀑布流
     
             
         
             
                  
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？
            
            
                       周迅天雷滚滚的[杀马特]发型                沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？

图片高度BUG修正：

由于网络传输的速度问题，当浏览器加载了dom，但是img图片还没有加载完毕，这个插件在计算图片高度和定位的时候，就会出错，在firefox和chrome中最为明显，尤其是google chrome.

原因：

在chrome浏览器下测试，在图片加载过程中，img的宽度和高度均为0，而在IE下，则浏览器先给img设定了宽度和高度，所以这个插件在IE下使用正常，但在chrome会出错。而这个插件看了官方的image demo也是如此，box层并没有动态生成一个高度值把布局撑开。

解决办法就是先让所有的图片加载完毕，才执行一次masonry()方法。

代码如下：

或者使用它自带的方法imagesLoaded

var $container = $('#container');   $container.imagesLoaded( function(){    $container.masonry({      itemSelector : '.cell'   });  });

当然了，这样子的话，在加载图片的时候，你会先看到图片简单的排列而已，没有砖块瀑布流的效果，只有当所有图片加载完成后才会出现砖块效果。所以，至于以上代码加不加，就要考虑你的网站的访问速度了！

瀑布流的无限加载

结合jquery.infinitescroll.js使用 jquery.infinitescroll.js原理大概就是通过ajax不断请求后面的数据，然后填充到后面

无限滚动条-jquery.infinitescroll.js使用说明

瀑布流与无限滚动条一起使用，双剑合璧

网上找的demo

转载地址：http://dikio.baihongyu.com/

你可能感兴趣的文章