列高来自 Javascript

Question

我正在使用

columns: 15em;

自动设置页面上某些图像的格式。我想将填充图像放在列的空底部，比最长的列短。我可以找出这些图像需要的高度吗？

此外，有时列不会以最佳方式格式化图像。我在这里错过了什么吗？

您可以在此处试用我的代码： http://jsfiddle.net/ygc6r0as/

Answer 1

这应该给你一个开始。它遍历图像并使用简单的算法确定图像当前放置在哪一列，以及每列的总高度。

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

Column height via Javascript

html

javascript

css

jquery

multiple-columns