javascript - 在 Bootstrap "row"中运行 Javascript 循环

Question

我正在尝试将 12 个最新的 tumblr 帖子拉到网站并维护 Bootstrap 结构，但我无法弄清楚如何让循环为每个 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

这将在每次三张照片时添加 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;
}

我做了一个 fiddle 。 You can check it working.