如何用CSS3实现瀑布流效果

html-css022

如何用CSS3实现瀑布流效果,第1张

1、该效果使用CSS3的column-width实现，和js版的瀑布流不同：图片将纵向排列。

2、代码中使用了一小段JS，和瀑布流效果无关，主要用来动态插入元素，并实现模拟翻页

举例说明 如图：

首先，css3的布局主要用到下面三个属性

column-count

column-gap

column-rule

其次，在兼容column的浏览器中可以实现瀑布流，代码如下

.demo{

    width: 500px

    height: auto

    -webkit-column-count:3

    -moz-column-count:3

    column-count:3

    -webkit-column-gap:10px

    -moz-column-gap:10px

    column-gap:10px

    column-rule:3px outset #ff0000

    border: 1px solid #ddd

}

.demo div{

    background: #336699

    margin-bottom: 4px

    color: #eee

    padding: 10px

} <div class="demo">

        <div>1这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>2这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>3这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>4这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>5这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>6这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>7这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>8这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>9这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>11这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>12这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>13这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>14这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>15这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>16这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>17这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>18这是测试用的文字，测试能不能实现瀑布流。</div>

        <div>19这是测试用的文字，测试能不能实现瀑布流。</div>

    </div>

</div>