网页制作中的瀑布流效果

  在小公司工作，往往都是前台页面，后台数据的交互都是需要自己亲自去完成，作为学习java的小伙伴，对这个页面的制作以及美化实在不是很在行，不过我一直在学习，学习一些HTML5 以及CSS 3，制作一些还看得过去的一些页面效果吧！

  想把这个网页制作中的一个瀑布流的效果记录下来，在一些淘宝网，以图片展示信息的网站还是比较流行的，慢慢的进步吧！废话少说，开始制作吧！

1.html代码

<div class="body_content">
    <div><img src="../img/微信图片_20170621143240.jpg">
        <p>张皓轩</p>
    </div>
    <div><img src="../img/微信图片_20170621143254.jpg">
        <p>大笑：“哈哈哈”</p>
    </div>
    <div><img src="../img/微信图片_20170621143259.jpg">
        <p>小样，我瞪你</p>
    </div>
    <div><img src="../img/微信图片_20170621143304.jpg">
        <p>rock roll</p>
    </div>
    <div><img src="../img/微信图片_20170621143318.jpg">
        <p>你个笨蛋，在干嘛</p>
    </div>
    <div><img src="../img/微信图片_20170621143326.jpg">
        <p>猜不透你</p>
    </div>
    <div><img src="../img/微信图片_20170621143338.jpg">
        <p>大家好，给我照相的是个逗比</p>
    </div>
    <div><img src="../img/微信图片_20170621143342.jpg">
        <p>“哼哼哼”</p>
    </div>
    <div><img src="../img/微信图片_20170621143346.jpg">
        <p>小心我咬你</p>
    </div>
    <div><img src="../img/微信图片_20170621143350.jpg">
    </div>
    <div><img src="../img/微信图片_20170621143356.jpg">
        <p>我怎么这样高兴</p>
    </div>
    <div><img src="../img/微信图片_20170621143401.jpg">
        <p>我想到了...，不告诉你</p>
    </div>
    <div><img src="../img/微信图片_20170621143406.jpg">
        <p>你快过来，我不笑了</p>
    </div>
    <div><img src="../img/微信图片_20170621143409.jpg">
        <p>挺好玩，你是逗比吗</p>
    </div>
    <div><img src="../img/微信图片_20170621143414.jpg">
        <p>我想葛优瘫</p>
    </div>
    <div><img src="../img/微信图片_20170621143423.jpg">
        <p>好吧，你赢了</p>
    </div>
    <div><img src="../img/微信图片_20170621143419.jpg">
        <p>就这样了，你确定</p>
    </div>
</div>

2.css样式代码

.body_content{
    column-width: 250px;
    column-gap: 5px;
    -webkit-column-width:250px;//谷歌浏览器支持
    -moz-column-width:250px;//火狐浏览器
    -ms-column-width:250px;//IE支持
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    -ms-column-gap:5px;
}
.body_content div{
    width: 250px;
    margin: 5px 0px;
}
.body_content div img{
    width: 250px;
}
.body_content div p{
    text-align: center;
}

总结：很牛×的，代码很少就能实现强大的效果，而且很好看的。放一下效果图，只看图片的效果，主页面的效果的css没放上。