我正在使用
columns: 15em;
自动设置页面上某些图像的格式。我想将填充图像放在列的空底部,比最长的列短。我可以找出这些图像需要的高度吗?
此外,有时列不会以最佳方式格式化图像。我在这里错过了什么吗?
您可以在此处试用我的代码: http://jsfiddle.net/ygc6r0as/
最佳答案
这应该给你一个开始。它遍历图像并使用简单的算法确定图像当前放置在哪一列,以及每列的总高度。
var images = document.getElementsByTagName('img'),
cols = [],
colHeights = [],
baseOffset = images[0].offsetLeft;
for (var i=0; i < images.length; i++) {
var img = images[i];
var col = Math.round( (img.offsetLeft - baseOffset) / img.width );
if (!cols[col]) {
cols[col] = [];
colHeights[col] = 0;
}
cols[col].push( img );
var bottom = img.offsetTop + img.offsetHeight;
if (bottom > colHeights[col])
colHeights[col] = bottom;
}
console.log(cols, colHeights);
关于javascript - 通过 Javascript 的列高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28443014/