class原生js获取父元素_原生js实现瀑布流效果

这就是通过左浮动设置的布局样式&＃xff0c;我们可以看到在第二行的时候&＃xff0c;第七个盒子浮动是根据第三个盒子来进行定位的。第三行的时候第七个盒子又挡住了第十个盒子的去路&＃xff0c;所以这样我们是没法完成布局的。

2.通过定位的方式进行布局

前面我们已经知道了浮动布局不能满足我们的需求&＃xff0c;所以我们寻求另外一种布局方式&＃xff0c;那就是通过定位&＃xff0c;给每个盒子设置定位属性后&＃xff0c;我们就可以通过动态的设置相应的top&＃xff0c;left值来让盒子规规矩矩的为我们排列。

&＃xff08;一&＃xff09;给所有盒子的父元素加上相对定位属性&＃xff0c;给所有盒子加上绝对定位属性&＃xff1a;

&＃xff08;二&＃xff09;定位之后我们得到的界面是这样的&＃xff1a;

&＃xff08;三&＃xff09;如何判断一行有多少列&＃xff1a;

因为我们的界面宽度是变化的&＃xff0c;所以列数也需要跟着变化&＃xff0c;动态设置列数的原理大致如下&＃xff1a;

1.获取到页面的宽度

2.获取到每个盒子的宽度

3.需要显示的列数 &＃61; 页面宽度/盒子宽度

注意&＃xff1a;一般盒子之间都有一个间隙&＃xff0c;所以我们的公式变成如下&＃xff1a;

显示的列数(column) &＃61; 页面宽度(pageWidth)/&＃xff08;盒子宽度(itemWidth)&＃43;间隙(gap)&＃xff09;

&＃xff08;四&＃xff09;排列第一行

• 我们有很多盒子&＃xff0c;太多了我们就不好管理&＃xff0c;所以我们把所有盒子装进一个数组arr里面&＃xff0c;下标从0开始&＃xff0c;用i来代表盒子。那么我们如何知道这个盒子是不是应该排列在第一行呢。其实很简单&＃xff0c;想一下&＃xff0c;我们这么多盒子&＃xff0c;全部都要动态布局&＃xff0c;动态的设置他的left、top值&＃xff0c;那么for循环肯定是避免不了的&＃xff0c;当i&＃xff08;所有盒子的索引&＃xff09;的时候&＃xff0c;盒子应该在第一行。比如说我们一行有5个盒子&＃xff0c;那么第五个盒子的索引就是4&＃xff0c;由于4<5&＃xff0c;所以在第一行&＃xff0c;如果索引为6&＃xff0c;由于6>5&＃xff0c;所以在第二行。代码基本就是这个样子

• 知道了盒子在第1行之后&＃xff0c;我们只需要动态的设置盒子的left值就能排列好了。
• 怎么动态计算每个盒子的left值呢&＃xff1a;left&＃61;i*(itemWidth&＃43;gap)&＃xff0c;比如说我们排列第二个盒子&＃xff0c;它的索引值i就是1&＃xff0c;i*(itemWidth&＃43;gap)刚好就是第一个盒子和间隙的宽度和&＃xff0c;所以距离left值也刚刚好。

说了这么多&＃xff0c;画个图理解一下&＃xff1a;

&＃xff08;五&＃xff09;获取所有列的高度和

• 在第一行排列好后&＃xff0c;我们就需要排列第二行了&＃xff0c;但是第二行我们需要用到top值了&＃xff0c;前面原理的时候说了&＃xff0c;我们就是根据每一列的最小高度和来进行排列&＃xff0c;所以这里我们需要计算出第一行所有列的高度和并保存。
• 我们定义一个数组arr来保存高度。

我们需要在页面一进入的时候就获取高度&＃xff0c;也就是写在onload里面&＃xff0c;因为图片的加载特征是&＃xff1a;等页面都加载完之后才去请求加载&＃xff0c;所以不写在入口函数里可能会出现高度获取不到的情况。

&＃xff08;六&＃xff09;排列第二行

• 获取到刚刚数组中&＃xff0c;高度最小的那一列&＃xff0c;将第2行的第1个盒子放置在它的下方&＃xff1b;
• 此时的left值就是高度最小列的offsetLeft&＃xff1b;top值就是第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)。
• 记录下高度最小列的索引index&＃xff0c;后面计算会用到&＃xff1b;
• 设置完成之后&＃xff0c;会发现后面所有的盒子都叠在这个高度最小列的下面&＃xff0c;原因就是此时的最小列高度没有改变&＃xff0c;应该加上下面盒子 的高度&＃xff0c;得出一个新高度。我们需要在最小列后面加了一个盒子之后重新计算所有列的最小高度的列。

看图说话&＃xff1a;我们看到第六个盒子下面下面全是其他盒子。

&＃xff08;七&＃xff09;重新获取最小高度列的高度

• 排了第二行的第一个盒子之后&＃xff0c;最小高度列已经发生了变化&＃xff0c;我们需要重新计算一下
• 当前高度最小列的高度 &＃61; 当前高度最小列的高度 &＃43; 间隙 &＃43; 下面图片盒子的高度

看图说话&＃xff1a;现在知道我们保留index做什么了吧。

&＃xff08;八&＃xff09;设置为响应式

• 将整个设置样式的部分封装成一个函数&＃xff0c;在onload里面注册一个resize事件&＃xff0c;只要页面一发生改变&＃xff0c;就触发样式部分的代码。

实时改变pageWidth的宽度&＃xff0c;这样瀑布流就会是一个响应式的效果了

&＃xff08;九&＃xff09;添加懒加载效果

懒加载的实现原理可以参考我的上一篇文章&＃xff0c;说得很清楚详细。大致原理用一张图来描述&＃xff1a;

&＃xff08;十&＃xff09;所有代码(没有包含懒加载代码)

注意&＃xff1a;如果要加入懒加载效果的话&＃xff0c;可以参考我的之前一篇文章&＃xff0c;讲的较为详细&＃xff0c;由于这里没有在

里面添加图片&＃xff0c;所以&＃xff0c;不能实现懒加载效果。这里只设置了div&＃xff0c;并且分别给div设置的高度&＃xff0c;稍加繁琐。如果有合适的图片资源&＃xff0c;可以不用设置。

五.总结

到这里&＃xff0c;我们的瀑布流式布局布局也算讲完了&＃xff0c;讲得过程比较啰嗦&＃xff0c;也是为了让更多的人能够轻松理解。从整个实现过程来看&＃xff0c;我们主要有两个重点&＃xff1a;

• 瀑布流式布局是利用定位来实现的&＃xff0c;动态的改变元素的top和left值。
• 获取最小高度和的列并保存它的索引&＃xff0c;以便让下一行的元素知道该放在哪里。

六.源码

更多源码请移步GitHub&＃xff1a;

Hacker233/Javascript​github.com