ウォーターフォールフローレイアウトのJS実装の解析例-jsチュートリアル-php.cn

ウォーターフォールフローレイアウトのJS実装の解析例

黄舟

リリース： 2017-10-23 09:49:54

オリジナル

1386 人が閲覧しました

この記事の例では、参考のためにウォーターフォールフローレイアウト表示を実装する JS の具体的なコードを共有します。具体的な内容は次のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流布局</title>
  <script src="wallpoll.js"></script>
  <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" >
</head>
<body>
  <p id="main">
    <p class="box">
      <p class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/1.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/2.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/3.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/4.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/5.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/6.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/7.jpg" alt="">
      </p>
    </p>

    <p class="box">
      <p class="pic">
        <img src="wallpoll/8.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/9.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/10.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/11.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/12.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/13.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/14.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/15.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/16.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/17.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/18.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/19.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/20.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/21.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/22.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/23.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/24.jpg" alt="">
      </p>
    </p>
  </p>
</body>
</html>

ログイン後にコピー

css パート

*{
  padding:0px;
  margin:0px;
}
.main{
  position:relative;
}
.box{
  padding:15px 0 0 10px;
  float:left;
}
.pic{
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  /*float:left;*/
}
img{
  width:170px;
  height:auto;
}

ログイン後にコピー

JS パート

rreee

コースの住所。

以上がウォーターフォールフローレイアウトのJS実装の解析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。