日常总结知识点1:
bootstracp 的栅格布局原理 媒体查询 Bootstrap框架中的网格系统就是将容器平分成12份,最后结合媒体查询,就制作出了强大的响应式网格系统。 数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。 在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。 具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素。 通过设置内距(padding)从而创建列与列之间的间距。 图片懒加载: 首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面。 <image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'> 然后是监听滚动,直接用window.onscroll就可以了,但是要注意一点的是类似于window的scroll和resize,还有mousemove这类触发很频繁的事件,最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法,这里先不多做介绍了。 接着要判断图片是否出现在了视窗里面,主要是三个高度:1