css3瀑布流卡片展示

最新推荐文章于 2024-08-15 23:19:32 发布

林中明月间。

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量1.1k

点赞数

分类专栏： Css3 文章标签： css3瀑布流卡片展示

本文链接：https://blog.csdn.net/a772116804/article/details/78647663

版权

Css3 专栏收录该内容

68 篇文章 2 订阅

订阅专栏

<!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=gbk" />
<title>css3瀑布流卡片展示</title>
<meta name="description" content="jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。" />

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>


<style type="text/css">
*{padding:0;margin:0}
/*给大盒子添加样式*/
#con{width:980px;margin:60px auto;border-radius:25px;box-shadow:5px 5px 10px #000;padding:20px;

/*下面代码是兼容各个浏览器的，并实现了四列，没两列之间间距为30px，*/
-moz-column-count:4;-moz-column-gap:30px;-moz-column-rule:0px solid #ff0000; //火狐浏览器
-webkit-column-count:4;-webkit-column-gap:30px;-webkit-column-rule:0px solid #ff0000; //Google chrome
-o-column-count:4;-o-column-gap:30px;-o-column-rule:0px solid #ff0000; //Opera浏览器的
}

/*小盒子内容区的样式，display:inline-block：实现效果*/
#con .pic{width:188px; min-height:100px;box-shadow:2px 2px 6px #b5b5b5;padding:20px 15px;margin:10px;display:inline-block}

#con h3{border-bottom:1px solid #ddd;line-height:30px;text-align:center;padding:5px 5px;}
#con h3 a{text-decoration:none;color:#999;}
#con p{font-size:12px;color:#666;line-height:20px;white-space:nowrap;overflow:hidden;
/*很多文字，一行显示不下，用省略号显示的代码*/
text-overflow:ellipsis;-o-text-overflow:ellipsis;
-moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }

</style>

</head>

<body>
<div id="con">

<div class="pic">
<img src="images/1.jpg" width="188px" /> 
<h3><a href="#">野蛮生长</a></h3> 
<p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声
音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你
最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不
要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
青春得浪费在美好事物上。
</p> 
</div> 
</div>
</body>
</html>