你的位置:首页 > 软件开发 > Java > 原生JS实现瀑布流

原生JS实现瀑布流

发布时间:2015-09-06 20:00:08
浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果,就是一个典型的瀑布流。网上有很多JQ的 ...

原生JS实现瀑布流

  浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果,就是一个典型的瀑布流。

原生JS实现瀑布流

网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这里只是跟大家分享一下原生js实现瀑布流的效果,一起学习。

一步一步来:

首先新建一个文件,就叫瀑布流.html吧。

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>瀑布流</title>  <style type="text/css">  div{    background: #ccc;    width: 200px;    position: absolute;    transition:0.5s;  }  </style></head><body>    <script>    //js代码  </script></body></html>

原标题:原生JS实现瀑布流

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。