把下面代码做成html页面就可以直接看效果。 点击下载动态瀑布流网页源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>瀑布流以及回顶部的效果</title> <style type="text/css"> *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:#F9F8F7; } /*框架宽度*/ .all{ margin:0 auto; width:960px; } /*每列的宽度,背景设置为无色,实现列于列之间的间隔(省去了float:left造成的不好调整问题)240*4==你懂得啊亲*/ .number{ float:left; width:240px; } /*margin:5px保证了宽度是230px 因为外框是240px,内嵌230px,哈哈你懂了吧,实现间隔*/ .content { margin:5px; background-color:white; border:1px solid #DDDDDD; } img{ margin:10px; } .text{ margin:0 10px 10px; font-size:12px; line-height:1.35em; color:#444; } .loading{ position: absolute; width:100%; height:40px; display:none; text-align:center; background-color:RGB(189,203,207); } #toTop { position:fixed; _position:fixed; font-size:12px; color:#524D4D; width:50px; height:50px; line-height:50px; text-align:center; right:50px; bottom:100px; cursor:pointer; background-color:#ccc; display:none; } </style> <script type="text/javascript"> window.onload = function () { var reset = 0; //某些滚动条会触发三次scroll事件 用这个解决 var surplusHeight = 1000; //差值 var imgWidth = "208px"; //img的宽度 var imgHeight = 0; //img的高度 var textHeight = 0; //文字高度 var showTopButtonHeight = 500;//回到顶部按钮的距离 var bigDivCount = 4; var div1 = $("one"); var div2 = $("two"); var div3 = $("three"); var div4 = $("four"); var loading = $("loading"); var toTop = $("toTop"); var browser = getBrowser(); //得到浏览器的名称 var imgArray = []; //img数组 也就是数据来源 var textArray = []; //img底下的文字和img对应 textArray[0] = "迷上中国风:人间四月芳菲尽,山寺桃花始盛开;长恨春归无觅处,不知转入此中来。"; textArray[1] = "人生就像愤怒的小鸟,当你失败时,总有几头猪在笑"; textArray[2] = "一个人要是不逼自己一把根本不知道自己有多优秀"; textArray[3] = "人的脆弱和坚强都超乎自己的想象。有时,我可能脆弱得一句话就泪流满面,有时,也发现自己咬着牙走了很长的路。"; textArray[4] = "曾经发生的事不可能忘记,只是暂时想不起来而已。 ——《千与千寻》"; textArray[5] = "我 绽放 不过是华丽了一片你 转身 却颠覆了我的世界"; textArray[6] = "我相信这世界上,有些人有些事有些爱,在见到的第一次,就注定要羁绊一生,就注定像一棵树一样,生长在心里,生生世世."; textArray[7] = "有时候,你只需要振作自己,继续生活。"; textArray[8] = "决定你人生高度的,不是你的才能,而是你的态度。"; textArray[9] = "英国雪铁龙公司,借助社交网络来帮助完成产品设计!用户可以登录雪铁龙在Facebook上的主页,通过系统的引导完成对汽车的设计,最后邀请好友来投票!在最后的评选中,最受欢迎的车型将被量产,而设计者将获得一辆真实的汽车!"; textArray[10] = "岂是拈花难解脱,可怜飞絮太飘零。"; textArray[11] = "多情自古空余恨,好梦由来最易醒。 "; textArray[12] = "记得那次,我湿了右肩。"; textArray[13] = "在下雨天,我为你撑伞。"; textArray[14] = "其实你不用自卑因为你曾经在几千万甚至以亿计的选手中赢夺冠军"; textArray[15] = "生活将我们磨圆是为了让我们滚得更远"; imgArray[0] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_chinamobile.jpg"; imgArray[1] = "http://images.cnblogs.com/cnblogs_com/newway/335327/r_cloud.jpg"; imgArray[2] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_blue.jpg"; imgArray[3] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_girl02.jpg"; imgArray[4] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_g.jpg"; imgArray[5] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_girl.jpg"; imgArray[6] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_blue.jpg"; imgArray[7] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_iphone02.png"; imgArray[8] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_iphone.jpg"; imgArray[9] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_lumia.jpg"; imgArray[10] = "http://images.cnblogs.com/cnblogs_com/newway/335327/r_cloud.jpg"; imgArray[11] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_l.jpg"; imgArray[12] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_mx.jpg"; imgArray[13] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_watermellon.jpg"; imgArray[14] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_s.jpg"; imgArray[15] = "http://images.cnblogs.com/cnblogs_com/newway/371566/r_p.jpg"; loadImg(); //初始化 window.onscroll = fun_scroll;//绑定滚动事件 function fun_scroll() { //body的高度 var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight; //卷上去的高度 var top_top = document.body.scrollTop || document.documentElement.scrollTop; //回到顶部按钮操作 if (top_top > showTopButtonHeight) toTop.style.display = "block"; else toTop.style.display = "none"; //控制滚动条次数以及判断是否到达底部 if (reset == 0) { var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight; //body的高度 var top_top = document.body.scrollTop || document.documentElement.scrollTop; //卷上去的高度 var result = topAll - top_top;//页面总高度减去卷上去的高度 if (result < surplusHeight) { setTimeout(loadImg, 1000); reset = 1; } } else { setTimeout(function () { reset = 0; }, 1000); } } //加载图片 function loadImg() { loading.style.display = "none"; for (var i = 0; i < bigDivCount; i++) { div1.appendChild(addDiv()); div2.appendChild(addDiv()); div3.appendChild(addDiv()); div4.appendChild(addDiv()); } setTimeout(function () { var hh = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight; loading.style.top = hh + "px"; loading.style.display = "block"; }, 1000); } //声明一个包含img和title的div function addDiv() { //数组下标的随机值 var ran = Math.round(Math.random() * (imgArray.length - 1)); //title层 var small_div = document.createElement("div"); small_div.innerHTML = textArray[ran]; small_div.className="text"; //内部img var img = document.createElement("img"); img.alt = ""; img.src = imgArray[ran]; img.style.width = imgWidth; //包含img的层 var div = document.createElement("div"); div.className = "content"; div.appendChild(img); div.appendChild(small_div); return div; } //通过id得到对象 function $(id) { return document.getElementById(id); } //得到浏览器的名称 function getBrowser() { var OsObject = ""; if (navigator.userAgent.indexOf("MSIE") > 0) { return "MSIE"; } if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { return "Firefox"; } if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { return "Safari"; } if (isCamino = navigator.userAgent.indexOf("Camino") > 0) { return "Camino"; } if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) { return "Gecko"; } } //回到顶部 toTop.onclick = function () { var count = 500; //每次的距离 var speed = 600; //速度 var timer = setInterval(function () { var top_top = document.body.scrollTop || document.documentElement.scrollTop; var tt = top_top - count; tt = (tt < 300) ? 0 : tt; if (top_top > 0) window.scrollTo(tt, tt); else clearInterval(timer); }, speed) }; } </script> </head> <body> <h1 id="h1">加载第三方的测试图片,有点慢...</h1> <div id="all" class="all"> <div id="one" class="number"> </div> <div id="two" class="number"> </div> <div id="three" class="number"> </div> <div id="four" class="number"> </div> </div> <div id="loading" class="loading"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498621480586&di=c23ec54a648a585140abfdab06713089&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3De9378a7b083387449c902778643ff5cf%2F1f178a82b9014a90e9109296ad773912b31beeeb.jpg" /> </div> <div id="toTop">回去吧</div> </body> </html>