侷限於屏幕尺寸

Question

圖像搜索結果我有folloing代碼

 function (data) { 
      var size = 0; 
      windowWidth = $(window).width(); //retrieve current window width 
      windowHeight = $(window).height(); //retrieve current window height 
      $.each(data.items, function (i, item) { 
       var y = item.description.search("width"); 
       picWidth = parseInt(item.description.substr(y + 7, 3)); 
       var x = item.description.search("height"); 
       picHeight =parseInt(item.description.substr(x + 8, 3)); 


       $("<img/>").attr("src", item.media.m).prependTo("#results"); 
      }); 
     }); 
    }); 

如何限制圖像搜索的結果，以DISPLY僅適合屏幕圖像的量。

Answer 1

你可以用元素的getBoundingClientRect（）函數檢查它。 這裏是isVisible函數的例子，純js。

超時只是等待圖像加載。

function isVisible(element) { 
 
    const rect = element.getBoundingClientRect(); 
 

 
    return (isInRange(rect.top, 0, window.innerHeight) || 
 
     isInRange(rect.bottom, 0, window.innerHeight)) && 
 
     (isInRange(rect.left, 0, window.innerWidth) || 
 
      isInRange(rect.right, 0, window.innerWidth)); 
 
} 
 

 
function isInRange(value, start, stop) { 
 
    return value >= start && value <= stop; 
 
} 
 

 
setTimeout(() => { 
 
    const visible = Array.prototype.filter.call(document.getElementsByTagName('img'), isVisible); 
 

 
    document.getElementById('target').innerHTML = visible.map(el => el.id).join(', '); 
 
}, 2000);

img { 
 
    margin: 100px; 
 
}

visible ids: <span id="target"></span> 
 
<br> 
 
<img id="first" src="http://loremflickr.com/320/240" /> 
 
<img id="second" src="http://loremflickr.com/200/240" />