重构之旅2—多栏布局与JS实现瀑布流

css3属性之多栏布局与JS实现瀑布流

　　　背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决。这也就显示出了博客和笔记的区别，自己平时做笔记，更多的记录，而不是总结，其实自己没有熟练掌握。

　　有的时候甚至出现了这样的笔记：

　我打算坚持写博客，不论自己总结有多么差劲，也要坚持写，哪怕几年后我看到以前的笔记，自己会偷偷笑出声。想想原来大一时的技术还是那样的稚嫩啊。

Css3多列

　　1）首提的兼容性问题：IE10以及opera支持多列（column），chrome需要-webkit-前缀，Firefox需要-moz-的前缀，Ie9以及更早版本就不支持多列了。你可以使用这个工具，很方便的查看你的浏览器内核以及版本信息http://ie.icoa.cn/

　　2）Css3多列属性:css3多列主要是五个属性

column-count　　 <规定元素被分隔的列数>

column-gap　　　 <规定列与列之间的间隔>

column-rule　　    <列之间的宽度、样式、颜色>

column-width        <列的宽度>

column-span         <元素应该横跨的列数>

　注意：在设置column-width宽度时，同时设置盒子的width，否则宽度默认为100%，每栏宽度按栏数平均分；盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度

css3多列和JS实现瀑布流

　给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开vpn，打开了pinterest的官网。

自己也梳理梳理逻辑：<在写js代码之前，一定要先搞清逻辑，再动手写代码>

我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局，

1）当一行排满后，准备排第二行的时候，把第一个图片放到上一行图片高度最小处，以此类推，

另外有一点就是自动加载，这里我做一个条件来判断是否加载，

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：重构之旅2—多栏布局与JS实现瀑布流

关键词：JS