Question

我需要一些逻辑方面的帮助。我有一个包含600张图像的JSon Feed。我想展示前10张照片。当用户到达第十张图片时，如果阵列中有更多图片显示接下来的10张图片。我已经调整了json给我只有10张图片，但我不知道如何获得阵列中的下10个项目。我知道这与计数器有关，但它并没有为我提供连接。任何建议，pseudeo代码，链接或代码都是适用的。

谢谢

Answer 1

我可以考虑加载内容的两种方法。

使用所有照片创建DOM并仅显示第一个10.隐藏其余部分。一旦你看到可见的第10个项目，就显示下一个10。
保留对JSON对象的引用仅在第10次渲染。在按下第10次隐藏当前10 n显示接下来的10。

您没有提到是否要水平或垂直滚动。使用宽度固定的父级和包含宽度大的目标图像的子级div创建2个div

你可以在http://jsfiddle.net/ch4nd4n/LS7VV/4/看到一个例子，这可能不是你想要的，但你可以理解。

HTML结构

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

需要触发onload或post body load的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);

    });
});

Answer 2

它只是java脚本中的pseudeo。只需分析循环。

刚开始将Json Feed中的图像收集到数组容器中。当你得到10张图像时，用功能显示它们并清洁容器。继续做，直到所有图像都结束。通过再次调用函数显示小于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.

JavaScript数组show10图像接下来10

2 个答案: