css让图片实现瀑布流 HTML CSS 实现 前端 图片 横向 瀑布流 响应式

说明

使用CSS实现横向瀑布流， 不用JS，速度更快， 当然， 可以用JS调整顺序

代码部分html>

JSBin

section{

display:flex;

flex-wrap:wrap;

}

section::after{

content:'';

flex-grow:999999999;

}

div{

margin:2px;

background-color:white;

position:relative;

}

i{

display:block;

}

img{

position:absolute;

top:0;

width:100%;

vertical-align:bottom;

}

body{

margin:0auto;

width:80%;

}

style="width:{{img.width*200/img.height}}px;flex-grow:{{img.width*200/img.height}}">

angular.module('App',[]).controller('ImageLayout',ImageLayout);

functionImageLayout($scope,$http){

$http.get('https://xieranmaya.github.io/images/cats/cats.json').success(function(imgs){

$scope.imgs=imgs

})

}