gpt4 book ai didi

css - 如何使用尽可能少的 JavaScript 来创建垂直堆叠的网格

转载 作者:行者123 更新时间:2023-11-28 05:34:41 25 4
gpt4 key购买 nike

使用 AngularJS ng-repeat 我有一系列不同大小的 div 来填充页面。问题(如下所示)是,当我希望一个元素出现在新行上时,我希望它对齐它上方的元素,而它会将此“行”上的所有元素与最低悬挂元素对齐。

我正在使用 Bootstrap,但是我不知道如何使用网格系统来获取可以跨越每列任意高度的数据。相反,所有 div 都是简单的 float: left'd 最大宽度和高度:auto,它可以创建响应式左对齐网格,但不考虑每行的单个元素放置。

例如,此网格的第二个“行”(243 x 399) 上的第一个元素比第一个“行”(224 x 305) 上的第一个元素低一定数量的像素,具有一定数量像素的指定边距(尽管我认为它与元素齐平没有问题)。那么 320 x 347 就是低于 344 x 246 的相同像素数,依此类推。

我知道我将如何在 Javascript/JQuery 中执行此操作,尽管它肯定会让人觉得很 hacky,而且我觉得必须有一种更惯用的方法来主要使用 CSS 来实现此目标。

var routeApp = angular.module('routerApp', []);
routeApp.controller('loadCtrl', ['$scope',
function($scope) {
$scope.tiles = [];
for (var i = 0; i < 10; i++) {
var d = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
var e = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
$scope.tiles.push("http://placehold.it/" + d.toString() + "x" + e.toString());
}
}
]);
.tiles {
float: left;
max-width: 200px;
width: 100%;
height: auto;
margin: 5 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="routerApp">
<div ng-controller="loadCtrl">
<div ng-repeat="til in tiles track by $index">
<a href="www.google.com"/>
<img class="tiles" ng-src="{{til}}"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

最佳答案

我回答过类似的问题here

如果这不起作用,请告诉我,我可以尝试详细说明。

基本上, float 就像试图用透明胶带修补漏洞。 =)

关于css - 如何使用尽可能少的 JavaScript 来创建垂直堆叠的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38296396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com