根據窗口大小加載X張圖片，並帶有img寬度

Question

我真的不知道從哪一個開始。但是我在腦海中想到了這個想法，而且我非常想看看是否可以執行。我使用Instagram jQuery plugin加載基於標籤的instagram圖像。我想達到的目的（或者讓某人幫助我實現）是設置要加載的圖像數量，並根據窗口大小設置它們的寬度。

ex。 1如果窗口寬度爲1200px，則在每個圖像上加載12張寬度爲100px的圖片 ex。 2如果窗口寬度爲800px，則在每個圖像上加載10張寬度爲80px的圖片 etc ...

但是，這必須動態完成，以便圖像的數量及其寬度總是對應於窗口寬度。這是爲了確保只有一行圖像（不使用「溢出隱藏」等）。

這裏是我迄今爲止

$(document).ready(function() { 
var insta_container = $(".instaflow"), insta_next_url 

insta_container.instagram({ 
    hash: 'ASuperAwesomeHashTag', 
    clientId : 'MY_CLIENT_ID', 
    show : 16, 
    onComplete : function (photos, data) { 
     insta_next_url = data.pagination.next_url 
     var instaimg = $('img.instagram-image'); 
     instaimg.css({ 'width': ($(window).width()/1) }); 
    } 
}) 

$('button').on('click', function(){ 
var button = $(this), text = button.text() 

    if (button.text() != 'LOADING' && button.hasClass('icon-plus-sign-alt')){ 
     button.removeClass('icon-plus-sign-alt') 
     button.addClass('loading') 
     button.text('LOADING') 
     insta_container.instagram({ 
      next_url : insta_next_url, 
      show : 8, 
      onComplete : function(photos, data) { 
       if ($('.instagram-placeholder').children().text() != ""){ 
        button.remove(); 
       } 
       insta_next_url = data.pagination.next_url 
       button.text(text) 
       button.removeClass('loading') 
       button.addClass('icon-plus-sign-alt') 
      } 
     }) 
    } 
}) 
}); 

因此，「秀」值必須relativ到有多少寬度利用。在只有600px寬的窗口中加載20張照片看起來不太好。 +我想確保只有一行圖像（不使用DIV隱藏的溢出等。由於有一個加載更多的按鈕，它不會顯示「更多的圖片，如果他們被困在一個DIV中」 「cuts of」）。這就是爲什麼我還需要根據窗口寬度來定義圖片的寬度。

我知道這可能是一個「瀰漫」的問題，但如果有人覺得他們可以幫助我得到這個做我會非常感激。

Answer 1

這將始終與100px的每個

var img_amount = $(window).width()/100; 
//in this case each image dimension will be 100px 
var img_dimension = $(window).width()/img_amount; 
//if you want to go for a cross browser solution and not use the css property 'box-sizing' 
//subtract the padding and margins of the images (if any) 
img_dimension -= [padding + margin]; 
//subtract any borders 
img_dimension -= [border width]; 

尺寸離開圖像現在，如果你w ^螞蟻有儘可能多的圖片儘可能不使扭曲的頁面佈局，你可以做這樣的事情：

var reduced_dimension = $(window).width()/100; 
var min_amount = 6; 
var img_amount = min_amount + parseInt(reduced_dimension/2); 

而這樣一來，如果窗口寬度爲800像素，然後img_amoung = 6 + parseInt(8/2)這將是10

到確定圖像的基於最小圖像的寬度和和最小圖像高度，你可以做到這一點的數量：

function determineAmount(width, divisor){ 
    var reduced_dimension = width/divisor; 
    var min_dimension = 50; //minimum 50px 
    var max_dimension = 250; //maximum 250px 
    var min_amount = 6; 
    //start calculations 
    var img_amount = min_amount + parseInt(reduced_dimension/2); 
    var img_dimension = width/img_amount; 
    if(img_dimension < min_dimension){ 
     return determineAmount(width, divisor + 10); 
    } 
    else if(img_dimension > max_dimension){ 
     return determineAmount(width, divisor - 10); 
    } 

    return {'amount':img_amount,'dimension':img_dimension}; 
} 

你會調用它像這樣：determineAmount($(window).width(), 100)
JSF iddle：http://jsfiddle.net/jwhrQ/