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

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

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 先来写一个简单的图片页面复制代码html head link rel=stylesheet type=text css href=css main css script type=text javascript src= lib jquery jquery-1 11 1 min...

先来写一个简单的图片页面

复制代码

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

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%;

}

用CSS实现阴阳八卦图等图形 - html/css语言栏目：

CSS 最核心的几个概念 - html/css语言栏目：html.cs

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论