HTML CSS 实现 前端 图片 横向 瀑布流 响应式
说明
使用CSS实现横向瀑布流, 不用JS,速度更快, 当然, 可以用JS调整顺序
代码部分
<!DOCTYPE html> <html ng-app="App"> <head> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> 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: 0 auto; width: 80%; } </style> </head> <body ng-controller="ImageLayout"> <section> <div ng-repeat="img in imgs" style="width:{{img.width*200/img.height}}px;flex-grow:{{img.width*200/img.height}}"> <i style="padding-bottom:{{img.height/img.width*100}}%"></i> <img src="{{img.fullUrl}}" alt=""> </div> </section> </body> <script> angular.module('App', []).controller('ImageLayout', ImageLayout); function ImageLayout($scope, $http) { $http.get('https://xieranmaya.github.io/images/cats/cats.json').success(function (imgs) { $scope.imgs = imgs }) } </script> </html>