前端效果(一)

瀑布流效果

1. 排版方式的特性：内容是由多个不同高度的方格组成，而版面切割为多个直行，这些方格在每一个直行中一个接着一个排列，所以行与行之间有一些不整齐的感觉。
   做这种版面布局：直接使用别人做好的。如：Masonry.js、lsotope.js等

2. 用纯css制作简单版瀑布流效果

	1.css column 
       只需要用到css两个属性，column-count和column-gap
       图片进行随机调整一下
       主要限制：它是从上至下，再从左至右。应该是左至右、上至下。

	<style>
        body{
            margin:4px;
            font-family: Helvetica;
        }
        //css3引入了多列文本布局：columns, column-count, column-gap等相关属性设置，其本意是实现如报纸一样的多栏显示.
        .masonry{
            column-count:4;   //css3新增特性
            column-gap: 0;      //设置列间隙
        }
        .item{
            padding:2px;
            position: relative;
            //counter-increment属性设置为counter属性值所指定的计数器名
            counter-increment:item-counter;
        }
        .item img{
            display:block;
            width:100%;
           height:auto;     /* 这样图片就会因.item容器的大小缩放了 */ 
        } 
        /* 给每一个图片加一个编号 */
        .item::after{
            position:absolute;
            display:block;
            top:2px;
            left:2px;
            width:24px;
            height:24px;
            
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color:#FFF;
            //counter属性值对多个项目进行连续编号，计数器可任意命名 （ content:counter(计数器名) ）
            content:counter(item-counter);
        }
    	</style>

    2.运用flexbox
        缺点：需要设置flex容器的高度，所以需要知道内容加起来的高度是多少，
            还要考虑分成多少个直行，去为flex容器计算一个合理的高度。
            因为flex容器高度是固定的，所以当调整页面的宽度的时候，又只需要3个直行。

<style>
       body{
           margin:4px;
           font-family: Helvetica;
       }
       .masonry{
           display: flex;

           /* flex-direction: row;    这个换成row就可以水平排列*/
           flex-direction: column;
           flex-wrap:wrap;   /*flexbox的内容就会由上至下排列*/
           /*当这个flex容器的高度少于内容的高度时，内容就会被“分到下一行”，即向右排列*/
           height:1950px;   /*就会向右排列*/
       }
       .item{
           position:relative;
           width:25%;
           padding:2px;
           box-sizing: border-box;
           counter-increment: item-counter;
       }
       .item img{
           display: block;
           width:100%;
           height:auto;
       }
       /* 给每一个图片加一个编号 */
       .item::after{
           position:absolute;
           display:block;
           top:2px;
           left:2px;
           width:24px;
           height:24px;
           
           text-align: center;
           line-height: 24px;
           background-color: #000;
           color:#FFF;
           content:counter(item-counter);
       }
       /* 现在还是上至下、左至右，flexbox容器的元素可以套用一个order的设定值，
           让他可以不跟随HTML结构的顺序来排列 
           现在总共有4个直行，可以选择1、5、9、13个方格，将它排到第一个直行，可以通过order设置为1，
               再选择2、6、10、14，将它排到第二个直行，设置order为2即可，以此类推
       */
       .item:nth-child(4n+1){
           order:1;
       }
       .item:nth-child(4n+2){
           order:2;
       }
       .item:nth-child(4n+3){
           order:3;
       }
       .item:nth-child(4n){
           order:4;
       }
   </style>

<div class="masonry">
        <div class="item">
            <!-- 可以随机生成一些假图 -->
            <img src="https://picsum.photos/360/460?random=1" alt="">
        </div>
        ...
</div>