js实现的瀑布流布局

原创
2017/05/12 19:24
阅读数 305

1. 为了防止某些人不知道瀑布流是啥玩意我还是先介绍下

瀑布流:又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动而不断加载。

今天做下javascript的瀑布流式布局,想学的自己看代码

2. 优点

  1. 操作简单(滚动鼠标)

  2. 节省空间

  3. 用户体验好

3. 缺点

  1. 无限滚动加载模式,页脚就永远加载不出来了。

4.代码实现

4.1 第一步 创建模板

首先你的想好,你想要创建几列,然后在body中创建好模板

今天做下javascript的瀑布流式布局,想学的自己看代码

4.2 第二步 设置css样式

设置写简单的样式,让每个图片之间有点间隙,通俗易懂点就是,让照片更有视觉冲击力,比较有美感。

今天做下javascript的瀑布流式布局,想学的自己看代码

4.3 第三步 添加图片

现在就是利用js原生循环创建图片和li。

今天做下javascript的瀑布流式布局,想学的自己看代码

4.4 第四步 怎么把图片添加到ul中

这时候就要想想怎么把图片添加到ul,因为这时候图片大小不一样,如果你依次循环添加到ul中,可能会出现长的图片都在一列,短的都在一列,可能会使中间出现一个大的缺口,那么就会很缺少美感。

今天做下javascript的瀑布流式布局,想学的自己看代码

所以,我们就可以,每次都找到它的最短的那一列,然后添加到它的后面,不管是谁,只要在添加图片的时候,只要你短,我就在你后面添加的道理。就能有效的避免刚才那种情况的发生了,吼吼,看代码吧......

今天做下javascript的瀑布流式布局,想学的自己看代码

4.5 第五步 完成瀑布流之各种型号美女

图片不能太大,要不然上传不了,这就尴尬了......

今天做下javascript的瀑布流式布局,想学的自己看代码

5. 完整代码

就知道有些人按捺不住,我懂你,把完整代码都给你好了吧!!!

今天做下javascript的瀑布流式布局,想学的自己看代码

今天做下javascript的瀑布流式布局,想学的自己看代码

6. 结束语

看完我写的js瀑布流之各种型号美女,有没有感觉你在喷血啊。

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部