动态获取某个元素的高度_waterfall瀑布流布局+动态渲染

目录

• 瀑布流典型网站

• 瀑布流布局原理

  • 大体思路

  • 具体思路

• 插件封装(5步)

• 动态渲染

  • 发送请求

  • 渲染页面

  • 需求分析

  • 渲染第一页数据

  • 第二页面的渲染(手动加载)

  • 第二页面的渲染(滚动加载)

• 特别需要注意的问题

瀑布流典型网站

花瓣网、堆糖

瀑布流布局原理

大体思路

首先先是页面布局 特点是：宽度一样，长度不一样

由此可以知道，这种布局要用到绝对定位的思想来做。

上面的五个正常排列，到了第六个以后就要找最矮的追加了。

如何获取最矮的一列呢？

第一个最好找，其他的每一个盒子可以获取它的高度，找最矮的盒子，然后找到最矮盒子的定位。

新追加进去的盒子的定位是：

• left：最矮盒子的索引*(盒子的宽度+左右间距)

• top: 这个盒子的高度 + 上下间距

放进去之后这一列的高度变化，记录下来生成新的高度，然后进行下一轮高度的比较。以此类推。

waterful是一个组件，基于jquery的一个组件。

具体思路

最外边的左右两边是没有间距的，所以5列的情况下有4个间距。所以宽度width一定的情况下，间距的宽度space是可以计算出来的：

间距

var space = (wParent - 5 * width) / (col - 1);
// wParent 父盒子的宽度，width是子盒子的宽度，col是列数
复制代码

第一排的盒子的定位：

• top ：0

• left ：索引*(width + space)

第二排的盒子的定位：

• top ：minHeight + space

• left ：索引*(width + space)

所以5列的高度要用一个数组表示，可以找到最矮的元素以及其当前的索引。

插件封装

因为在第一次加载和第n次加载的时候，都要进行瀑布流布局。所以将瀑布流布局的方法进行一个插件进行封装，可以形成代码的复用。首先了解瀑布流的html布局

class = "container">

class = "items">

class = "item">src = "" />hello

class = "item">src = "" />hello




class = "btn">正在加载...


复制代码

下面就来封装一个jquery的插件

第一步

将jquery中的全局变量转化为局部变量。

1. 防止全局污染，提高性能

2. 形成一个闭包，闭包里面定义的变量是不会影响外部变量的。

/*自调用  形成一个闭包 */
(function($){
    
/*如果不加jQuery里面使用的$是全局变量，加了之后使用的就是成员变量*/

})(jQuery);
复制代码

第二步

jquery.fn.extend(object)

jquery中的fn函数
提供一个第三方方法的一个入口，扩展jquery元素集(使用$可以获取到的元素) 来提供新的方法(通常用来制作插件)

/*js/jquery-waterfall.js*/
(function($){
    
     $.fn.waterfall = function(){