详解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年4月2日
下一篇 2018年4月8日

相关推荐

  • 详解JavaScript轮播图技术理解

    众所周知,轮播图现今在网页中占据着必不可少的地位。任何的一个网站,一个网页,都会出现一个轮播图,而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解,很多地方可能不是很全面,甚至可能说是错误的,希望大家多多指点。 下面这个是我自己闲暇时随便做的一个轮播图: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制…

    产品运营 2018年4月2日
    33700
  • 写给网页设计师的代码书

    给身边一些只会设计不懂代码的小白们讲讲代码。

    产品运营 2018年5月24日
    13000
  • 运营行业相关词汇

    搜索引擎广告(SEA)Search Engine Advertising,广告主根据自己的产品或服务的内容、特点等,确定相关的关键词,撰写广告内容并自主定价投放的广告。当用户搜索到广告主投放的关键词时,相应的广告就会展示 信息流广告也称“原生广告”,与内容混排在一起,又称“最不像广告的广告”、“长得最像内容的广告”,一般如不留意在它们周围出现的“推广”、“广…

    产品运营 2020年7月2日
    10200
  • 计费相关词汇

    CPCCost Per Click,按点击收费 CPMCost Per Mille,千次广告收入,只要向足够量级的用户展示了广告主的内容,广告主就为此付费 CPTCost Per Time,按时长计费,即按展示时长收费,以固定价格买断一段时间内的广告位展示 CPDCostPer Download,按下载付费,按用户完成APP下载计费 GDGuaranteed…

    产品运营 2020年7月2日
    15800
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    产品运营 2021年3月3日
    9500

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信