0

我一直在尝试 Pinterest 风格的布局，并通过之前的 StackOverflow 讨论找到了这个网站： http ://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/。

当在 HTML 中创建 .block 类时，让它工作没有问题，但我现在正试图让块在 ajax 调用的成功函数中创建 .block 类时显示。

我实际上有一些工作，但真的不确定这是否是这样做的方法。

我在 document.ready 上触发 ajax 调用，然后像这样在 window.load 上准备块（Ben Hollands 代码）......

$(document).ready(function() {
start();

function start() {
    url="path/to/json/data";
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        cache: false,
        success: function(response){
            var result='';
            $.each(response, function(k, v){                
                result += '<div class="block">' + v.text + '</div>';
            });

            $(".blocks").html(result);
        }
    });
}
});

接着...

$(window).load(function() {
var colCount = 0;
var colWidth = 0;
var margin = 10;
var spaceLeft = 0;
var windowWidth = 0;
var blocks = [];
setupBlocks();

function setupBlocks() {
    windowWidth = $(window).width();
    blocks = [];

    colWidth = $('.block').outerWidth();

    // Calculate the margin so the blocks are evenly spaced within the window
    colCount = Math.floor(windowWidth/(colWidth+margin*2));
    spaceLeft = (windowWidth - ((colWidth*colCount)+(margin*(colCount-1)))) / 2;

    for(var i=0;i<colCount;i++){
        blocks.push(margin);
    }
    positionBlocks();
}

function positionBlocks() {
    $('.block').each(function(i){
        var min = Math.min.apply(Math, blocks);
        var index = $.inArray(min, blocks);
        var leftPos = margin+(index*(colWidth+margin));
        $(this).css({
            'left':(leftPos+spaceLeft)+'px',
            'top':min+'px'
        });
        blocks[index] = min+$(this).outerHeight()+margin;
    }); 
}   
});

你觉得呢？

4

0 回答 0