瀑布流布局
通过Multi-columns相关的属性column-count、column-gap配合break-inside来实现瀑布流布局著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。
<style>
/**
.masonry中设置column-count和column-gap，前者用来设置列数，后者设置列间距
break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局
*/
.masonry {
column-count: 5;
column-gap: 0;
}
.item {
break-inside: avoid;
box-sizing: border-box;
padding: 10px;
}
</style>
<div class="masonry">
<div class="item">
<div class="item__content"> </div>
</div>
<div class="item">
<div class="item__content"> </div>
</div>
<!-- more items -->
</div>
鼠标悬浮照片缓慢放大
a img {
display: block;
width: 100%;
-webkit-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
a:hover img {
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
}