CSS3 - 多列属性详解(图片瀑布流)

index.html


<html>
<head>
<meta charset="utf-8">
<title>图片瀑布流title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="picBegin.css" rel="stylesheet" type="text/css">
head>

<body>
    
    <h1>图片瀑布流h1>
    <ul class="picC">
        <li><img src="images/00.jpg" alt="" />li>
        <li><img src="images/01.jpg" alt="" />li>
        <li><img src="images/02.jpg" alt="" />li>
        <li><img src="images/03.jpg" alt="" />li>
        <li><img src="images/04.jpg" alt="" />li>
        <li><img src="images/05.jpg" alt="" />li>
        <li><img src="images/06.jpg" alt="" />li>
        <li><img src="images/07.jpg" alt="" />li>
        <li><img src="images/08.jpg" alt="" />li>
        <li><img src="images/09.jpg" alt="" />li>
        <li><img src="images/10.jpg" alt="" />li>
        <li><img src="images/11.jpg" alt="" />li>
        <li><img src="images/12.jpg" alt="" />li>
        <li><img src="images/13.jpg" alt="" />li>
        <li><img src="images/14.jpg" alt="" />li>
        <li><img src="images/15.jpg" alt="" />li>
        <li><img src="images/16.jpg" alt="" />li>
        <li><img src="images/17.jpg" alt="" />li>
        <li><img src="images/18.jpg" alt="" />li>
        <li><img src="images/19.jpg" alt="" />li>
    ul>
body>
html>

picBegin.css

img{
    width:100%;
}

h1{
    width:100%;
    height:50px;
    margin:0;
    text-align:center;
    line-height:50px;
    background-color:#fff;
    box-shadow:0 2px 6px 0 rgba(0,0,0,.5);
    position:fixed;
    left:0;
    top:0;
}
.picC{
    width:90%;
    margin:50px auto;
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    -column-gap:20px;
    list-style:none;
    -webkit-column-rule:1px solid dashed rgba(0,0,0,.5);
    -moz-column-rule:1px dashed rgba(0,0,0,.5);
    column-rule:1px dashed rgba(0,0,0,.5);
}   
.picC li{
    margin-top:10px;
}

CSS3 - 多列属性详解(图片瀑布流)_第1张图片

你可能感兴趣的:(HTML5/CSS3)