Question

I have a pinterest style site and made a jquery script that spaces the cubes evenly no matter how big the browser is. For some reason on page load it has some overlapping cubes which didn’t exist before. I talked with the guy that helped me make it and he said it’s probly because of the code before the code that creates the blocks and positions them. It crashes the javascript.

I think it’s because of the $(window).scroll ajax loading code but I can’t seem to pinpoint the problem. I tried moving positionBlocks(); around and nothing changes. If you load the page in your browser and then change your browser size then it positions them correctly but obviously I want it to look right when the user first gets there.

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

I had to add this to the end of my script:

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

and then this to the end of the on scroll ajax load. Sometimes jquery just needs a little kick in the face haha:

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