详解Javascript原生瀑布流源码示例演示

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

Javascript:原生瀑布流源码示例演示,

js瀑布流加载

网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这里只是跟大家分享一下原生js实现瀑布流的效果,一起学习。为了方便演示区分,我使用的是加背景数字方框的瀑布流,如果你要练习可以使用本地图片来测试!

Javascript:原生瀑布流源码示例演示,

js实现瀑布流

当滚动条到最下,往下拖动就会继续加载(如下图):

Javascript:原生瀑布流源码示例演示,

js瀑布流演示

js实现瀑布流源码:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset=”utf-8″>

<style type=”text/css”>

* {

margin: 0;

padding: 0;

}

div {

width: 900px;

border: 1px solid blue;

margin: 0 auto;

float: left;

margin-left: 62px;

}

ul {

width: 280px;

border:1px solid red;

float: left;

margin: 5px;

}

li {

border: 1px solid green;

list-style-type: none;

margin: 5px;

}

</style>

<script type=”text/javascript”>

window.onload = function ()

{

var oUl = document.getElementsByTagName(‘ul’);

var arr = [];

var n = 0;

var arrColor = [‘red’, ‘orange’, ‘yellow’, ‘green’, ‘lime’, ‘blue’, ‘purple’];

for (var i = 0; i < oUl.length; i++) {

arr.push(oUl[i]);

}

createLi();

//求出可视区的高度

var clientHeight = document.documentElement.clientHeight;

window.onscroll = function ()

{

//求出滚轮的高度

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

//求出滚轮滚动的最大高度

var scrollMaxTop = document.body.scrollHeight;

if ((clientHeight + scrollTop) >= scrollMaxTop) {

if (n > 6) {

return false;

}

createLi();

}

}

function createLi()

{

n++;

for (var i = 0; i < 20; i++) {

//对每一个ul中创建li元素

var li = document.createElement(‘li’);

var oHeight = rnd(100, 300);

li.style.height = oHeight + ‘px’;

li.innerHTML = i;

li.style.lineHeight = oHeight + ‘px’;

li.style.fontSize = ’50px’;

li.style.textAlign = ‘center’;

li.style.background = arrColor[n-1];

//追加li元素,并且追加到最短的下边

arr.sort(function(a, b){

return a.offsetHeight – b.offsetHeight;

});

arr[0].appendChild(li);

}

}

function rnd(n, m)

{

return parseInt(Math.random()*(m-n+1)+n);

}

}

</script>

</head>

<body>

<div>

<ul></ul>

<ul></ul>

<ul></ul>

</div>

</body>

</html>

作者:小屋
链接:http://www.rumenwu.com/operate/585.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(0)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-04-02 22:30
下一篇 2018-04-08 23:57

相关推荐

  • 看了《速度与激情8》,才发觉这是自动驾驶汽车史上被黑得最惨的一次

    《速8》为全球的科技极客们献上的大礼——无人车是如何变成丧尸大军的。

    2017-04-17
    6.6K11
  • 网页meta标签怎么写?常用的meta标签

    元数据(metadata)是关于数据的信息。 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 …

    2018-07-26
    1.8K0
  • chrome浏览器CSS字体大小小于12px不起作用解决方法

    chrome浏览器不能显示字体大小小于12px解决方法,CSS设置小于12px字体不起作用的解决方法篇。 无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解决方法。 针对低版本chrome谷歌浏览器设置一个校准字体大小样式: -webkit-text-size-adjust:none 用法: body{-web…

    2018-03-18
    1.9K0
  • 如何从 0 到 1 搭建私域流量

    最近几年私域流量非常火爆,不少企业开始运营自己的私域流量,私域流量是属于成本比较低,转化率还不错的一种方式;并且跟用户可以产生密切的联系,更加深入用户群体;本文作者分享了关于如何从 0 到 1 搭建私域流量的经验,我们一起来看一下。 这是一篇私域流量运营的入门文章,本文主要内容是在介绍电商该如何搭建自己的私域流量。 01 私域流量的本质是什么 百度百科说: …

    2021-03-03
    6040
  • 企业如何做好自媒体运营?6大自媒体平台玩法详解

    企业运营自媒体需要从目标消费者出发,企业的目标消费者在哪里,就在哪里展开自媒体运营。再根据自身的产品属性、用户特征,结合不同自媒体平台的调性,来决定选择在哪个平台进行运营,根据不同平台可以采用不同的内容形式和运营玩法。 小米董事长雷军,为了给新发售的小米CC 做宣传,2019年6月开通了小红书帐号。到目前为止,接近9个月时间雷总一共发了70条笔记,收获2.6…

    2020-10-10
    5610
  • 人员角色相关词汇

    IS Inside Sales,电话销售 OS Outside Sales,面访销售 SMB Small and Medium-sized Business,中小企业客户 LA Local Account ,地方大客户 KA Key Account,大客户 BD Business Development,商务拓展 OP Operations,运维 PM Pr…

    2020-07-02
    8260