ホームページ > 記事 > ウェブフロントエンド > ウォーターフォールフローレイアウトのJS実装の解析例
ウォーターフォールフローレイアウトのJS実装の解析例
- 黄舟オリジナル
- 2017-10-23 09:49:541420ブラウズ
この記事の例では、参考のためにウォーターフォール フロー レイアウト表示を実装する 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 パート
コースの住所。
以上がウォーターフォールフローレイアウトのJS実装の解析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。