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

我正在显示15幅图像的列表。根据图像的宽度（是的，图像宽度不同）和屏幕大小的宽度，每行上可能有不同数量的图像

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

以下是我的html的外观：

<div class="view-content">
  <div class="views-row views-row-1"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-2"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-3"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-4"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-5"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-6"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-7"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-8"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-9"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-10"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-11"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-12"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-13"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-14"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
  <div class="views-row views-row-15"><a href="#"><img src="http://www.example.com/image.jpg /><a/></div>
</div>

---

我通过查看最后一项并计算屏幕右侧有多少空间，就可以知道这一点。如果有足够的空间，我添加我的元素

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);
}

var item='.views-row-15'；
变量元素=$（项目）；
//获取屏幕大小。
var screen_size=$（窗口）.width（）；
//通过查看
//窗口和元素的末尾。
var amount_of_empty_space=屏幕大小-（element.offset（）.left+element.width（））；
//如果超过此金额，则添加按钮。
如果（空空间的数量>240）{
var按钮=“”；
按钮+=''；
按钮+=‘查看更多’；
按钮+=''；
$（按钮）。插入后面（项目）；
}

img height或width是绝对值吗？@Jonasw不是。但行必须有绝对值，或者行的高度=最大图像的高度？@Jonasw我猜图像有高度和宽度，但可能会根据屏幕大小而改变。例如，在移动屏幕上，我们可能希望在一行上显示2个图像，但在桌面上，我们可能希望显示4或5个图像。

img{height:300px;}

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);
}