CSS3的学习--实现瀑布流 - html/css语言栏目：html.

2024/06/04 · admin

先来写一个简单的图片页面复制代码 < html> <head> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="../lib/jquery/jquery-1.11.1.min.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src=""> </div> </div> <div class="box"> <div class="pic"> <img src=""> </div> </div>  <div class="box"> <div class="pic"> <img src=""> </div> </div> </div> </body> <script type="text/javascript"> var width = 300, height = 300; $('.box img').each(function(){ // 随机图片的高宽，如果大小一样，就没必要用瀑布流了 width = Math.floor(Math.random() * 100) + 300; height = Math.floor(Math.random() * 500) + 300; $(this).attr('src', 'http://placekitten.com/'+ height +'/' + width); }); </script> </html> 复制代码假设，宽和高都是350，生成链接为http://placekitten.com/350/350，访问这个link就会得到一张350X350的可爱的小猫图片~~O(∩_∩)O~~ 然后，添加相应的 CSS即可复制代码 * { padding: 0; margin: 0; } #main { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -moz-column-gap:20px; -webkit-column-gap:20px; column-gap:20px; padding: 10px; } .box { padding: 15px; border: solid 2px #eeeeee; border-radius: 4px; margin-bottom: 15px; cursor: pointer; } .box img { width: 100%; }

CSS3的学习--实现瀑布流 - html/css语言栏目：html.

相关文章

最新评论

最近发表

网站分类

文章归档