Question

我正在显示15张图片的列表。根据图像的宽度（是图像宽度变化）和屏幕尺寸的宽度，每行上可能有不同数量的图像。

例如，有一种情况是我有3行4个图像和1行3个图像。现在在最后一行，有一个空的空间。如何在最后一行的空白处添加一些元素或文本，并且只有它是空的？因此，如果我有3行15个图像，我就不应该看到我添加的元素。

这就是我的html外观：

result[i].(karma - profanity) and result[i].profanity)

Answer 1

window.onresize=a;
window.onload=a;
function a(){
imgs=document.getElementsByTagName("img");
totalwidth=0;
rows=1;
imgs.forEach(function(img){
//ad img to row
totalwidth+=img.width;
if(totalwidth>window.innerWidth){
//row is full;
totalwidth=img.width;
//add img to new row
rows++;
//new row
}
}
height=rows*300;
//assuming img.height is 300px

if(height<window.innerHeight){
//oh we have space
space=window.innerHeight-height;
//add something
document.createElement(...);
//do it yourself
}
}

仅当行具有绝对高度时才有效：

img{height:300px;}

Answer 2

我能够通过查看最后一项并弄清楚屏幕右侧有多少空间来解决这个问题。如果有足够的空间我添加我的元素。

var item = '.views-row-15';
var element = $(item);

// Get the screen size.
var screen_size = $(window).width();

// Calculate the amount of empty space by looking at the space between the
// end of the window and the element.
var amount_of_empty_space = screen_size - (element.offset().left + element.width());

// If past this amount add the button.
if (amount_of_empty_space > 240) {
  var button = '';
  button += '<div class="views-row-more">';
  button += '  <div class="more-styles-button--text">See  More</div>';
  button += '</div>';

  $(button).insertAfter(item);
}

如果空间可用，则将元素添加到html

2 个答案: