Question

我正在尝试将12个最新的tumblr帖子拉到网站并维护引导结构，但我无法弄清楚如何让循环为每个span4提供不同的照片。现在它正在拉12行，每张照片重复3次，我希望它是4行3张照片，每张照片各不相同。有人可以帮到这里吗？

function formatPhotoHTML(post) {
    var html = '<div class="container">';
    html += '<div class="row">';
    html += '<div class="span4">';

    for (var i = 0; i < post.photos.length; i++) {
        var photo = post.photos[i] ;
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
    }

    html += '</div>';
    html += '</div>';

    return html;
}

function appendPostToPage(post) {
  $('.postspot').append(post);
}

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}


$(document).ready(function() {
  getPosts();
});

Answer 1

你看到12行，每张照片重复3次，因为你告诉它这样做的功能。所以为了显示4行和每张照片一次，删除函数内的重复代码。

function formatPhotoHTML(post) {
var closeDivNow =3;
var html = '<div class="container">';
    for (var i = 0; i <=post.photos.length; i++) {
    if(i%3 == 0 || i==0 ){
               html += '<div class="row">';
        }
        var photo = post.photos[i] ;
            html += '<div class="span4">';
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>';

        if(i%3 == 0 || i==0 && i == closeDivNow){
                  closeDivNow = closeDivNow + i;
                  html += '</div>';
            }
    }
    html += '</div>';
return html;
}

Answer 2

每次三张照片都会添加div.row"。

没有聪明才能避免内部循环，这段代码更容易理解：

function formatPhotoHTML(post) {
    var html = '<div class="container">';

    var photos_per_row = 3;
    for(var row = 0; row < post.photos.length; row += photos_per_row)
    {
        html += '<div class="row">'; // open div.row
        for(var i = row; i < (row + photos_per_row); i++)
        {
            var photo = post.photos[i];
            html += '<div class="span4">'; // open span4
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>'; // close span4
        }
        html += '</div>'; // close div.row
    }

    html += '</div>'; // close div.container
    return html;
}

我做了一个小提琴。 You can check it working.

Answer 3

好的，所以你在这里拉了12个帖子：

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}

你可以使用modulas运算符来解决每次你通过这样的三个帖子而不是：

var html = '<div class="container">';

for (var i = 0; i < 12; i++) {

        if( (i%3 == 0 ){

           html += '<div class="row">'; // opening row every 3
        } 

        html += '<div class="span4">';
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';

        if( i%3 == 2 ){

           html += '</div>'; // closing row every 3
        } 



}

html += '</div>'; //closing container

我的有点粗糙，但这应该有用......

在引导程序中运行Javascript循环＆＃34; row＆＃34;

3 个答案: