jQuery无限载入瀑布流错位解决浅谈

旧城等待， 2022-07-15 01:20 223阅读 0赞

## jQuery无限载入瀑布流错位解决浅谈 ##

*  先上图看看效果：

![自己的一个项目页面][20161027222146395]  
*上图就是瀑布流的简单布局*

--------------------

*  瀑布流布局的官网：

[瀑布流布局的官网][Link 1]  
大家可以去看看api

*  怎么使用

var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: 200,//每列的宽度，不设就按第一个计算
      itemSelector: '.item',//需要排列的元素
      gutter: 20, //每列的间隙
    });

*\#container*：你的列表容器  
*.item*：你的列表项  
比较简单，引入了官方的js文件，我们绑定容器就可以实现瀑布流。  
然后就是无限加载，很多人喜欢用下拉自动加载，但是我个人觉得这样你的底部就等于白做了所以我做了一个按钮：  
![加载更多][20161027223713172]  
这样感觉没那么匆忙，慢慢走慢慢看嘛。

*  最后说说我怎么解决加载更多布局错乱的解决：

parentDiv.masonry().masonry("destroy");

`masonry("reload");`我用过没效果，然后就是每次加载到未绑定的新节点做瀑布流布局方式，这只能满足我的部分需求，所以我用了销毁和绑定新节点两种方式满足我的需求。

还是给个源码，万一有人需要呢。  
[github源码地址][github]

[20161027222146395]: /images/20220715/f351b7277b974eb9833eddd4326e7560.png
[Link 1]: http://masonry.desandro.com/
[20161027223713172]: /images/20220715/abc3d83c924b4088a4806cd78f735b43.png
[github]: https://github.com/yangshare/iwk/commit/98a08210889e85b54f1afd817f6e4e1d59c36838

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery+css实现瀑布流布局(无限加载)

文件目录： ![在这里插入图片描述][20200309130740816.png] images：这个文件夹放了需要的照片，名字都按照0，1,2，3…排列，便于

- 日理万妓/ 2023年07月12日 14:44/ 0 赞/ 169 阅读

相关华山论剑之浅谈iOS瀑布流

> 心灵鸡汤可不是谁想喝就喝的! --------------栋哥看完千篇一律的UI布局之后,当我们看到瀑布流的布局是不是觉得有种耳目一新的感觉呢?今天我们就说一下如果

拼搏现实的明天。/ 2023年01月05日 03:59/ 0 赞/ 261 阅读

相关浅谈响应式瀑布流的实现方式

瀑布流主要[应用][Link 1]在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度

深碍√TFBOYSˉ_/ 2022年08月07日 11:42/ 0 赞/ 152 阅读

相关 jQuery无限载入瀑布流错位解决浅谈

jQuery无限载入瀑布流错位解决浅谈先上图看看效果： ![自己的一个项目页面][20161027222146395] 上图就是瀑布流的简单布局 ----

旧城等待，/ 2022年07月15日 01:20/ 0 赞/ 224 阅读

相关 jQuery无限载入瀑布流错位解决浅谈

jQuery无限载入瀑布流错位解决浅谈先上图看看效果： ![自己的一个项目页面][20161027222146395] 上图就是瀑布流的简单布局 ----

心已赠人/ 2022年07月15日 01:20/ 0 赞/ 141 阅读

相关 JQUERY之瀑布流

准备如下：去jquery官网下载jquery.js。效果如下： ![20170207165711414][] <!DOCTYPE html P

矫情吗；*/ 2022年07月12日 02:25/ 0 赞/ 182 阅读

相关 JQUERY之瀑布流

准备如下：去jquery官网下载jquery.js。效果如下： ![20170207165711414][] <!DOCTYPE html P

傷城~/ 2022年07月12日 02:25/ 0 赞/ 211 阅读

相关 JavaScript实现无限瀑布流

![70][] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年05月17日 11:14/ 0 赞/ 300 阅读

相关 jquery瀑布流布局

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery瀑布流布局</title>

柔光的暖阳◎/ 2022年04月22日 05:34/ 0 赞/ 306 阅读

相关 jQuery图片瀑布流

> 很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。推荐大家看一下瀑布流鼻

た入场券/ 2022年03月16日 08:24/ 0 赞/ 329 阅读