1.multi-column多列布局实现瀑布流

 

　　先简单的讲下multi-column相关的部分属性

 

　　column-count设置列数

 

　　column-gap设置列与列之间的间距

 

　　column-width设置每列的宽度

 

　　还要结合在子容器中设置break-inside防止多列布局，分页媒体和多区域上下文中的意外中断

 

　　break-inside属性值

 

　　auto指定既不强制也不禁止元素内的页/列中断。

 

　　avoid指定避免元素内的分页符。

 

　　avoid-page指定避免元素内的分页符。

 

　　avoid-column指定避免元素内的列中断。

 

　　avoid-region指定避免元素内的区域中断。

 

　　截取了部分，可自己填充

 

　　

 

　　

 

　　/*html文件*/

 

　　<!--使用multi-columns实现瀑布流-->

 

　　<divid="root">

 

　　<divclass="item">

 

　　<imgclass="itemImg"src="../images/1.jpeg"alt=""/>

 

　　<divclass="userInfo">

 

　　<imgclass="avatar"src="../images/gift.png"alt=""/>

 

　　<spanclass="username">牵起你的左手护着你</span>

 

　　</div>

 

　　</div>

 

　　<divclass="item">

 

　　<imgclass="itemImg"src="../images/2.jpg"alt=""/>

 

　　<divclass="userInfo">

 

　　<imgclass="avatar"src="../images/gift.png"alt=""/>

 

　　<spanclass="username">牵起你的左手护着你</span>

 

　　</div>

 

　　</div>

 

　　<divclass="item">

 

　　<imgclass="itemImg"src="../images/3.jpg"alt=""/>

 

　　<divclass="userInfo">

 

　　<imgclass="avatar"src="../images/gift.png"alt=""/>

 

　　<spanclass="username">牵起你的左手护着你</span>

 

　　</div>

 

　　</div>

 

　　<divclass="item">

 

　　<imgclass="itemImg"src="../images/4.jpg"alt=""/>

 

　　<divclass="userInfo">

 

　　<imgclass="avatar"src="../images/gift.png"alt=""/>

 

　　<spanclass="username">牵起你的左手护着你</span>

 

　　</div>

 

　　</div>

 

　　<divclass="item">

 

　　<imgclass="itemImg"src="../images/5.jpeg"alt=""/>

 

　　<divclass="userInfo">

 

　　<imgclass="avatar"src="../images/gift.png"alt=""/>

 

　　<spanclass="username">牵起你的左手护着你</span>

 

　　</div>

 

　　</div>

 

　　</div>

 

　　

 

　　

 

　　/*css样式*/

 

　　body{

 

　　background:#e5e5e5;

 

　　}

 

　　/*瀑布流最外层*/

 

　　#root{

 

　　margin:0auto;

 

　　width:1200px;

 

　　column-count:5;

 

　　column-width:240px;

 

　　column-gap:20px;

 

　　}

 

　　/*每一列图片包含层*/

 

　　.item{

 

　　margin-bottom:10px;

 

　　/*防止多列布局，分页媒体和多区域上下文中的意外中断*/

 

　　break-inside:avoid;

 

　　background:#fff;

 

　　}

 

　　.item:hover{

 

　　box-shadow:2px2px2pxrgba(0,0,0,.5);

 

　　}

 

　　/*图片*/

 

　　.itemImg{

 

　　width:100%;

 

　　vertical-align:middle;

 

　　}

 

　　/*图片下的信息包含层*/

 

　　.userInfo{

 

　　padding:5px10px;

 

　　}

 

　　.avatar{

 

　　vertical-align:middle;

 

　　width:30px;

 

　　height:30px;

 

　　border-radius:50%;

 

　　}

 

　　.username{

 

　　margin-left:5px;

 

　　text-shadow:2px2px2pxrgba(0,0,0,.3);

 

　　}





本文转载自中文网