瀑布流布局实现方案
Oct 21, 2017
周末空闲准备找部电影研究研究,最近《狙击精英:巅峰对决》挺火的,所以穷逼准备在网上搜索链接下载学习研究,无奈多次搜索未果,且大部分搜出来的链接都坏链。但是功夫不负有心人啊终于在渥兰网这个重未听说过的资源网站上下到了自己想要的学习资料,在下载的过程中该网站的首页让我产生了浓厚的F12
的兴趣。
1.瀑布流自适应是如何实现的?
当我第一次看见这种页面布局时,内心想的是肯定用的是column式布局,但是当我按下F12
之后发现我的想法是完全错误,其布局实现方式主要是通过float使每一个海报项浮动起来,然后通过transform来控制每一个海报项位置,这样亦解决了float元素的一个填充对齐问题。但是问题来了transform的位移值是如何确定的?
1.1 如何确定位移值
经过不断搜索该网站源代码发现他用的是一个叫isotope的插件。在github上翻看源码发现isotope是通过 原理实现的。
//TODO
2.其无限加载是怎么实现的?
在该网站中的无限加载是使用infinitescroll插件实现的,其实现的主要原理是
//TODO