前端 实用的冷门知识 持续更新中......

 

1.类似于jquery中的  toggle()

 // 如果有这个类名，就去掉，如果没有，就加上
        div.classList.toggle("expand");

2.css3中   columns属性实现瀑布流布局  ,多列布局

div
{
    columns:100px 3;   //分成3列  每列100px,如果视口缩小 则列数随之减少
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}

column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。
column-count最大列数
column-gap: 列与列间的间隙, ie下默认为 16px，其它浏览器未明确给出。

column-rule 每列间隙中的竖线

column-span: 元素跨越列数(firefox 不支持)