详解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日 下午10:30
下一篇 2018年4月8日 下午11:57

相关推荐

  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

    随着HTTPS的不断普及,越来越多的网站开启了HTTPS,给网站加上了小绿锁标识,作为全球知名的建站系统,WordPress对于HTTPS的兼容性是非常好的,几乎不用任何修改,只需要服务器配置好证书即可使用https链接访问。但是经常有用户反馈开启了以后地址栏没有绿色的锁(chrome浏览器),下面简单介绍下配置教程。 以下配置教程是基于已经在服务器配置好S…

    产品运营 2018年4月15日
    92200
  • 短视频社区内容如何做好冷启动?

    短视频社区是由内容所主导的。各家产品间工具模块的差别并不显著,做到内容的差异化,才是形成社区调性的根本。而所谓调性,则可以理解为“社区群众,在特定场景下,对同好内容的集体偏爱”。   时间回到两年前的那个春天,抖音强势登顶App Store下载量榜单并多次蝉联。行业老大哥快手坐拥数亿用户,开始面对外界对其增长乏力的质疑。 仿佛一夜之间,大街小巷都是…

    产品运营 2020年3月16日
    76500
  • B 站怎么成了拼多多的“广告部”?

    刚过去的 618 大促堪称近年来最卷的一届,批量生产的 ” 全网最低价 ” 却没有唤起幻想中的 ” 报复性消费 “,反而送上的是各大平台默契闭麦的战绩。 B 站却选择在这个消费哑火的时刻,倾全平台之力杀进了直播电商的拥挤赛道。 前不久,坐拥 445 万粉丝的 B 站美妆 UP 主 ” 宝剑嫂 &#8…

    2023年7月4日
    72100
  • 视频号管理助手,批量管理多个账号,一键分发全平台

    视频号管理助手,批量管理多个账号,一键分发全平台 现在无论个人还是机构企业,为了获得更多流量,都会注册开通搜狐号、网易等10多个自媒体平台,如果你分发图文,15个平台保底1小时。如果你只分发视频,15个平台至少需要2个小时同时还得上传分发都成功,达到想要的后,会发现内容全网发布,除了麻烦就是麻烦,如果你招聘了员工,那么更头疼。下面小编教你轻松解决这些琐事。 …

    2022年7月19日
    1.1K00
  • jQuery表格分页代码

    代码描述:jQuery伪分页表格分页代码,采用工厂模式开发,可自行配置每页显示条数,自动生成页数。方便易用,可扩展性高!

    产品运营 2018年4月26日
    69300

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信