如何用CSS3实现瀑布流效果

作者: 徐慕熹微 | 来源:发表于2016-07-22 22:00 被阅读7375次

CSS3功能挺强大,觉得几行代码就可以搞定一个效果,这几天学了一个瀑布流效果,还挺喜欢的。

效果图

效果链接https://kongo.bid/xmuwu/

一、原理图

在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果。

二、body部分代码

<body>
     <div id="con">//建立的大盒子
            //下面是内容区,就放一个盒子,其他的跟它是一样的          
           <div class="pic">
                  <img src="images/1.jpg" width="188px" />   //插入图片
                  <h3><a href="#">野蛮生长</a></h3>         //下面的标题
                 <p>人长大的标志:试着听从自己内心的声音,而不去在乎外面的声   
                  音,等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你
                  最大的敌人。能看书就不要发呆,能碎觉就不要拖延,能吃饭就不
                  要饿着,能亲吻就不要说话,能找到自己想做的事情就不容易了,
                  青春得浪费在美好事物上。
                </p>   //文字内容
          </div>     //这个内容盒子可以多复制一些,只要计算好大盒子的宽度和小盒子的数量就好了
    </div>
</body>

三、CSS3代码

*{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;  }

话说,CSS3真心强大,以前看到瀑布流样式的图片,从来没想过会这么简单,几行代码就能轻松搞定。

Ps:亲测,火狐、搜狗浏览器都出现这个效果了。

相关文章

  • 7. 多列

    1. 多列的效果 说明:在CSS3中,可以创建多列来对文本或者区域进行布局。 2. 使用多列实现瀑布流效果 瀑布流...

  • 如何用CSS3实现瀑布流效果

    CSS3功能挺强大,觉得几行代码就可以搞定一个效果,这几天学了一个瀑布流效果,还挺喜欢的。 效果图: 效果链接:h...

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 使用CSS3实现瀑布流效果

    demo地址:https://stackblitz.com/edit/js-fvp9on 效果图如下:

  • 瀑布流布局

    题目1: 实现一个瀑布流布局效果瀑布流代码题目2:实现木桶布局效果木桶布局代码题目3:实现一个新闻瀑布流新闻网站,...

  • 瀑布流布局

    1. 实现一个瀑布流布局效果 预览效果 2. 实现一个瀑布流新闻网站 预览效果

  • 瀑布流布局

    瀑布流布局 实现一个瀑布流布局效果 预览 根据课程视频实现一个新闻瀑布流新闻网站,查看效果

  • 瀑布流布局&木桶布局

    一、实现一个瀑布流布局效果。 二、实现木桶布局效果。 预览 三、实现一个新闻瀑布流新闻网站。查看效果 jsonp ...

网友评论

    本文标题:如何用CSS3实现瀑布流效果

    本文链接:https://www.haomeiwen.com/subject/gahbjttx.html