JavaScript瀑布流的实现（百度图片效果）

最新推荐文章于 2020-03-02 16:52:18 发布

「已注销」

最新推荐文章于 2020-03-02 16:52:18 发布

阅读量688

点赞数

文章标签： javascript 百度代码

本文链接：https://blog.csdn.net/qq_31644971/article/details/48896897

版权

实现一个瀑布流主要由HTML、css、JavaScript来实现。下面是实现代码。

<HTML部分>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流</title>
<link rel="stylesheet" href="瀑布流.css" type="text/css" />
<script src="../../瀑布流/瀑布流.js"></script>
</head>

<body>
   <div id="container">
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/1.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/2.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/3.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/4.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/5.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/6.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/7.png" />
         </div>
      </div><div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/8.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/9.png" />
         </div>
      </div>
      <div class="box">
         <div class="box_img">
            <img src="瀑布流.imag/10.png"