1. /*封装一个瀑布流插件*/
  2. (function($){
  3. $.fn.WaterFall = function(){
  4. /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this*/
  5. /*$this 拿到的瀑布流容器 中有需要需要去做定位的盒子*/
  6. var $this = $(this);
  7.  
  8. /*拿到容器的宽度*/
  9. var parentWidth = $this.width();
  10.  
  11. /*瀑布流容器当中的item*/
  12. var items = $this.children();
  13.  
  14. /*子容器的宽度*/
  15. var childWidth = items.width();
  16.  
  17. /*多少列*/
  18. var columnCount = 5;
  19.  
  20. /*间距*/
  21. var space = (parentWidth - childWidth * columnCount)/(columnCount-1);
  22.  
  23. /*核心布局代码*/
  24. /*
  25. * 1.第一排的盒子 top定位 都是0
  26. * 2.距离左边的距离 根据当前所属的列 第几列 5 索引 4*宽度+间距
  27. * 3.计算top的定位 找到最矮的那列 把它追加上去
  28. * 4.容器是没有高度的 需要计算最高的那列 设置高度
  29. * 【怎么样实时的记录每一列的高度】 需要有一个记录每一列高度的变量 数组记录五裂的高度
  30. * */
  31.  
  32. var colArray = [];
  33.  
  34. /*遍历所有的盒子*/
  35. $.each(items,function(i,item){
  36. /*当前盒子*/
  37. var $item = $(item);
  38. /*索引是0-4就是五个第一排的盒子*/
  39. if(i < 5){
  40. /*初始化数组*/
  41. colArray[i] = $item.height();
  42. /*第一排的盒子 定位*/
  43. $item.css({
  44. top:0,
  45. left:i*( childWidth + space )
  46. });
  47. }else{
  48. /*计算定位*/
  49. /*3.计算top的定位 找到最矮的那列 把它追加上去*/
  50. var minItem = colArray[0];/*最小的高度*/
  51. var minIndex = 0;/*最下的那列的索引*/
  52. for(var j = 0 ; j < colArray.length ; j ++){
  53. if(minItem > colArray[j]){
  54. minItem = colArray[j];
  55. minIndex = j;
  56. }
  57. }
  58. //console.log(minItem);
  59. /*因为要定位left 需要这列的索引*/
  60. $item.css({
  61. top:minItem + space,
  62. left:minIndex * (childWidth + space)
  63. });
  64. /*colArray 高度变了 所以要重新设置*/
  65. colArray[minIndex] = minItem + space + $item.height();
  66. }
  67. });
  68.  
  69. /*布局完成在来设置容器的高度*/
  70. console.log(colArray);
  71. /* 4.容器是没有高度的 需要计算最高的那列 设置高度*/
  72. var maxItem = colArray[0];
  73. for(var i = 0 ; i < colArray.length ; i ++){
  74. if(maxItem < colArray[i]){
  75. maxItem = colArray[i];
  76. }
  77. }
  78. $this.height(maxItem);
  79.  
  80. }
  81. })(jQuery);

基于jQuery封装一个瀑布流插件的更多相关文章

  1. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  2. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  3. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  4. 基于jQuery的简易瀑布流实现

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 基于jQuery 的图片瀑布流实现

    解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...

  6. vue 写一个瀑布流插件

    效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue  组件文件 <template> <div class ...

  7. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

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

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

  9. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

随机推荐

  1. .NET 解决方案 核心库整理

    一系列令人敬畏的.NET核心库,工具,框架和软件: https://www.cnblogs.com/weifeng123/p/11039345.html 企业级解决方案收录:  https://www ...

  2. url 传参数时出现中文乱码

    1.前端通过 url 传递参数,但是参数又有中文,在下一个页面接受参数的时候中文会乱码 解决方案为: 定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解 ...

  3. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  4. Android 性能测试初探(二)

    书接前文 Android 性能测试初探(一).上回大体介绍了下在 android 端的性能测试项,现在我们就细节测试项做一些阐述(包括如何自己 DIY 测试). 首先我们来说说启动时间.关于应用的启动 ...

  5. py西游公关之模块

    Py西游攻关之模块   模块&包(* * * * *) 模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可 ...

  6. css实现多行文字限制显示&编译失效解决方案

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. [luogu2679] 子串 (多维dp)

    传送门 Description 有两个仅包含小写英文字母的字符串 A 和 B . 现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来 ...

  8. 24 Point game

    24 Point game 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 There is a game which is called 24 Point game ...

  9. C#带cookie模拟登录百度

    #region 同步通过POST方式发送数据 /// <summary> /// 通过POST方式发送数据 /// </summary> /// <param name= ...

  10. SE955 激光扫描头设置 通过SSI串口进行设置

    扫描头是能够进行配置的,使其支持与禁用某些条码类型,设置有两种方式,一种是扫一下相应的设置条码,还有一种是通过SSI(simple serial interface)来设置,以下就讲一下SSI的设置方 ...