js实现的美女瀑布流效果代码

325 阅读 0 评论 215 点赞

我是靠谱客的博主大力毛巾，这篇文章主要介绍js实现的美女瀑布流效果代码，现在分享给大家，希望可以做个参考。

<!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:RGB(232,231,226); 
} 
.all{ 
margin:0 auto; 
width:1000px; 
} 
.number{ 
float:left; 
width:225px; 
} 
.content 
{ 
margin:5px; 
background-color:white; 
} 
img{ 
margin:5px; 
} 
.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:Blue; 
width:15px; 
text-align:center; 
right:300px; 
bottom:100px; 
cursor:pointer; 
background-color:RGB(243,247,251); 
display:none; 
} 
</style> 
 
</head> 
<body> 
<h1 id="h1">I like TRY</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="//file2.kaopuke.com:8081/files_image/201804/200803131036175436.gif" /> 
</div> 
<div id="toTop"><span>△回顶部</span></div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]