0

私はピンタレストスタイルのサイトを持っていて、ブラウザのサイズに関係なくキューブを均等に配置する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 に答える