JavaScript數組show10圖像接下來10

Question

我需要一些邏輯幫助。我有一個JSon飼料600圖像。我想展示前10張照片。當用戶到達第十張圖片時，如果陣列中有更多圖片顯示接下來的10張圖片。我已經調整json給我只有10張圖像，但我不知道如何獲得陣列中的下10個項目。我知道這與一個櫃檯有什麼關係，但它並沒有與我聯繫。任何建議，pseudeo代碼，鏈接或代碼是apprecaited。

謝謝

Answer 1

它只是在Java腳本pseudeo。只分析循環。

剛開始收集圖像從Json飼料到數組容器。當你得到10張圖像時，用功能顯示它們並清潔容器。繼續進行，直到所有圖像都結束。 再次通過調用函數顯示最後幾張少於十張的圖像。

我無法給出確切的代碼，因爲json feed結構現在已知。

var jsonFeed={...}; 
var counter=0; 
var setOfTenImages=[]; 
for(i=0;i<jsonFeed.length;i++){ 
    if(counter==10){ 
    showTenImages(setOfTenImages); // call function to display Ten Images 
    setOfTenImages=[];    // clean all container of Ten images which are displayed. 
    } 
    setOfTenImages[counter++]=jsonFeed[i].image; 
} 
    showTenImages(setOfTenImages); // Last remaining few images which are less than ten. 

Answer 2

有兩種方法我可以想到加載內容。

1. 用所有照片創建DOM並只顯示前10個。隱藏其餘部分。顯示下一個10，一旦你點擊可見的第10項。
2. 保持參考JSON對象只渲染第10位。在打第10個隱藏當前未來10

如果要水平或垂直滾動​​您還沒有提到10N的表演。 創建2個div與父寬度固定和子div包含目標圖像與巨大的寬度

你可以看到一個例子http://jsfiddle.net/ch4nd4n/LS7VV/4/這可能不是你想要的，但你可以得到的想法。你需要的onload火災或張貼車身負載

HTML結構

<div style="width:500px;overflow:hidden;height:255px;position:relative"> 
    <div id="images" style="width:40000px;position:absolute;"></div> 
</div>​ 

JavaScript的一部分。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60474555@N00&lang=en-us&jsoncallback=?", { 
    format: "json" 
}, function(data) { 
    var str = ""; 
    $.each(data.items, function(i, item) { 
     str += ("<img src='" + item.media.m + "'/>"); 
    }); 
    $("#images").append(str); 
    $("#images").find("img").click(function() { 
     // Add check to animate only if clicked image is not the center of parent div 
     $('#images').animate({ 
      left: '-=200' 
     }, 500); 

    }); 
});​