瀑布流的用户体验的问题

Question

js都是在页面渲染完成后开始执行，这就导致了刚进网页的一瞬间页面是没有瀑布流的，这样的话用户体验会很差，请问要怎么解决，或者有什么更好的插件
https://giphy.com/ 这个网站的瀑布流有人知道是怎么实现的吗，中间有占位

Answer 1

首先要明白一个事实是“js都是在页面渲染完成后开始执行” ，是你改变js文件退后js的加载导致的。其实对于瀑布流文件来说，把js 文件放在头部完全是可以的。这就要求layout 流程很快，不会让人产生“白屏”的效果。
为了加快瀑布流layout的计算，一般情况下我们要做下面这些优化。
1.服务端存放当前要布局的block的大小，这样前端代码运行时就不需要再去计算具体元素的大小，只需要直接进行布局即可。
2.在进行布局时，只进行可视范围内的页面，假设服务端有1w个模块需要布局，一次性只需要加载有限个数的模块，不需要一次性全部布局。
3.对于一些图片资源，只需要在模块上指定好对应的url即可。

类似的网站还有很多，比较有名是的 https://www.pinterest.com/,可以供你参考。
如果你想直接要解决方案，我知道一个付费的第三方组件，因为有广告嫌疑，我就不提了。