18363620917
把下面代码做成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>
