공간이있는 경우 html에 요소를 추가하십시오.

Question

15 개의 이미지 목록을 표시하고 있습니다. 이미지 폭 (예 : 이미지 너비가 다름) 및 화면 크기 너비에 따라 각 행마다 다른 양의 이미지가있을 수 있습니다.

예를 들어 이미지가 3 행 3 개, 이미지가 1 행인 경우가 있습니다. 이제 마지막 행에 빈 공간이 있습니다. 마지막 행의 빈 공간에 요소 나 텍스트를 추가하려면 어떻게해야합니까? 따라서 이미지 수가 3 행 인 경우 추가 된 요소가 표시되지 않아야합니다.

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