如果空間有限，請將元素添加到html

Question

我正在顯示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> 

Answer 1

我能夠通過看摸不着頭腦最後一項，並確定屏幕右側有多少空間。如果有足夠的空間，我添加我的元素。

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

Answer 2

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