详解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

相关推荐

  • 计费相关词汇

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

    2020-07-02
    1.7K0
  • 抖音1月涨粉榜分析 | 2021开年榜有哪些信号放出?

    春节已过,2020年短视频内容界的争奇斗艳也彻底落下了帷幕,内容创作者们集体迈向了新一年,投入了新一轮的战斗。 那么开年之际,抖音的内容创作生态呈现出了怎样的新气象?是否有新的内容形态、新的潜力创作者涌现呢?让我们先来看下1月的抖音涨粉榜单图(政务号、媒体号、明星号除外): 从榜单中上榜红人的涨粉情况,我们可以得到一个最直观的感受:在涨粉态势上,并没有呈现令…

    2021-02-20
    1.6K0
  • 国内外巨头加码云大战,“小清新”网易也要云上升级

    一直以低调著称的网易也坐不住,要进行云上升级了。

    2017-04-18
    3.3K0
  • 抖音表情包项目的运营逻辑

    趁着周末,本来想约大学的学妹出来吃个饭,顺便增进一下感情,想不到直接被学妹拒绝了,说没时间。 顿时,一股中年危机感涌上心头。难道,我不帅了吗?我的魅力已经消失了吗?我张郎帅尽了吗? 后来,学妹一解释才知道,原来她周末要在家赚钱。说到赚钱,我顿时就来劲了,经过我的软磨硬泡加打破砂锅问到底的精神,最终搞得明明白白、仔仔细细。学妹现在是在做抖音表情包项目,一个月可…

    2022-02-07
    6290
  • 被过度夸大的私域流量

    一边有李佳琦、薇娅的带货奇迹,一边也有王祖蓝、李湘、叶璇等明星的带货滑铁卢。 一边有董明珠一晚 6 大平台连动销售 65.4 亿,也有御泥坊全年 8000 多场直播平均每场收入不过 1.2 万元。 一边有商家纷纷重金上线各种小程序构建私域流量池,一边也有宜家逆潮流入驻天猫吃公域流量的红利。 私域流量,并不是看上去那么美。从去年开始升温的这一概念,在今年初然突…

    2020-06-06
    1.9K0
  • 也许是第一次,小米发布了一款激动人心但还无法量产的手机

    无法量产的亮银版,价格据说10万元都搞不定。

    2017-04-19
    3.5K1