瀑布流的效果布局 图标瀑布流显示是什么意思( 四 )


let data1 = [], //第一列 data2 = [], //第二列 data3 = [], //第三列 i = 0;while (i < data.length) { data1.push(data[i++]); if (i < data.length) { data2.push(data[i++]); } if (i < data.length) { data3.push(data[i++]); }}return { //第一列 data1, //第二列 data2, //第三列 data3};
在线Demo及完整代码地址:
效果如下:

瀑布流的效果布局 图标瀑布流显示是什么意思

文章插图
总结
做瀑布流需要考虑几方面大因素 , 图片质量 , 图片大小 , 加载速度 , 如果这些不能同时满足 , 会大大降低用户体验 。个人觉得瀑布流对于触屏终端体验会更好一些 。