Question

我有一个pinterest样式的网站，并制作了一个jquery脚本，无论浏览器有多大，都可以均匀地分隔立方体。出于某种原因，在页面加载时，它有一些以前不存在的重叠立方体。我跟那个帮助我做的人谈过，他说这很可能是因为代码创建了块并定位它们之前的代码。它崩溃了javascript。

我认为这是因为$（窗口）.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;          
        });
    });

Answer 1

我必须将其添加到我的脚本末尾：

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

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

setTimeout(function(){setupBlocks();},100);

jQuery立方体有时会相互重叠

1 个答案: