0

我有一个 pinterest 风格的网站，并制作了一个 jquery 脚本，无论浏览器有多大，它都能均匀地排列立方体。由于页面加载的某种原因，它有一些以前不存在的重叠立方体。我与帮助我制作它的人交谈，他说这可能是因为创建块并定位它们的代码之前的代码。它使javascript崩溃。

我认为这是因为 $(window).scroll ajax 加载代码，但我似乎无法确定问题所在。我尝试移动 positionBlocks(); 周围没有任何变化。如果您在浏览器中加载页面然后更改浏览器大小，那么它会正确定位它们，但显然我希望它在用户第一次到达那里时看起来正确。

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

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

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

function positionBlocks() {
    $('.block').each(function(i){
        var min = Array.min(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;
    });
}

// Function to get the Min value in Array
Array.min = function(array) {
    return Math.min.apply(Math, array);
};


var curlimit=<?php echo $curlimit;   ?>;
var totalnum=<?php echo $num_rws; ?>;
var perpage=<?Php echo $perpage ?>;
var working_already=false;

$(document).ready(function() {
//($(window).scrollTop() + $(window).height() )> $(document).height()*0.8
// old ($(window).scrollTop() + $(window).height() == $(document).height())

    $(window).resize(setupBlocks);

    $(window).scroll(function() {
        if(($(window).scrollTop() + $(window).height() )> $(document).height()*0.90  && totalnum>0 && working_already==false  ) {
        } else return false;

        working_already=true;
        $("div#loading_bar").fadeIn("slow");
        curlimit=curlimit+perpage;
        $("div#loading_data_location").html("");

        $.get('get_cubes.php?page=<?php echo $_GET['page'] ?>&curlimit='+curlimit, function(response) {
            $("div#loading_data_location").html(response);

            $("div#ColumnContainer").append($("div#loading_data_location").html()); 

            $("a#bigpic").fancybox({
                'onComplete' : imageLoadComplete,
                'onClosed' : imageClosed,
                'type': 'ajax' });

            if ($("div#loading_data_location").text()=="")  
                totalnum=0;
            else
                totalnum=<?php echo $num_rws; ?>;

            $('.like:not(.liked)').click(like_box);
            $('.save:not(.saved)').click(save_box);
            $('.follow:not(.following)').click(follow);
            $("div#loading_bar").fadeOut("fast");

            $("div#loading_data_location").html('');

            setupBlocks();
            working_already=false;          
        });
    });
4

1 回答 1

0

我不得不将此添加到脚本的末尾：

<script language="javascript">
$(window).bind("load", function() {
  setupBlocks();
});
</script>

然后到滚动 ajax 加载结束。有时 jquery 只需要一点面子哈哈：

setTimeout(function(){setupBlocks();},100);
于 2012-05-23T19:55:31.573 回答