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="/uploads/20261026/16ea0cf66d51efdbbc2a62b11ab0419fa72fb3320844f1d0d710480245ac9925.gif" /> </div> <div id="toTop"><span>△回顶部</span></div> </body> </html>

注意：引入外部JavaScript文件后，需要刷新页面才能执行相关代码。