jquery masonry image append

Question

晚上好，

我遇到了砌體問題。

這是我的所有相關代碼：

var $test; 
var $iterator = 0; 
$(document).ready(function() { 
    $("#demo-input").tokenInput("php-example.php" ,{ 
     classes: { 
      tokenList: "token-input-list-facebook", 
      token: "token-input-token-facebook", 
      tokenDelete: "token-input-delete-token-facebook", 
      selectedToken: "token-input-selected-token-facebook", 
      highlightedToken: "token-input-highlighted-token-facebook", 
      dropdown: "token-input-dropdown-facebook", 
      dropdownItem: "token-input-dropdown-item-facebook", 
      dropdownItem2: "token-input-dropdown-item2-facebook", 
      selectedDropdownItem: "token-input-selected-dropdown-item-facebook", 
      inputToken: "token-input-input-token-facebook" 
     }, 
     hintText: "Type in the names of your Tags", 
     noResultsText: "No results", 
     searchingText: "Searching..." 
    }); 
}); 

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
     columnWidth: 1, 
     isAnimated: !Modernizr.csstransitions 
    }); 
}); 

$(document).ready(function() { 
    $("input[type=button]").click(function() { 
     $.ajax({ url: "generatehtml.php", 
     data: {action: $(this).siblings("input[type=text]").val()}, 
     type: 'post', 
     dataType: "json", 
     success: 
      function(response){ 
       $test=response; 
       $iterator = $test.length; 

       for (i=0; i<10; i++){ 
        var $boxes = $(balls($iterator)); 
        $container.append($boxes).imagesLoaded(function(){$container.masonry('appended', $boxes);});    
       } 
       var $boxes = $('<div class="box" STYLE="color: rgba(255, 255, 255, 1);">These results are ranked from<BR> most similar, to least similar.<BR>The percentage below each game <BR>indicates how similar to the <BR>original input that game is.<BR></div>'); 
       $container.prepend($boxes).masonry('reload');  
      } 
     }); 
    }); 
}); 


window.onscroll = scroll; 

function scroll() { 
    var $boxes = $(balls($iterator)); 
    $container.append($boxes).imagesLoaded(function(){$container.masonry('appended', $boxes, true);}); 
} 
//+'<img src="timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' Replace this with the one below when timthumb is whitelisted 
function balls($i){ 
    $iterator -= 1; 
    var $width = 7.5; 
    return ('<div class="box">' 
    +''+$test[$iterator][1][2]+'' 
    +'<img src="'+$test[$iterator][2]+'" width="280" height="160"/>' 
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>' 
    +'</div>'); 
} 

我期望行爲： 加載頁面，從第二搜索欄選擇的遊戲，點擊 '提交'。
填充10個結果，滾動時填充更多結果。

但格式化到處都是，我知道你應該使用imagesLoaded（）插件，但我這樣做。

不管怎麼說，這是有問題的網站：

http://newgameplus.nikuai.net/TEST/ （第一搜索欄不BTW工作，所以忽略）

任何決議將不勝感激。非常感謝。

Answer 1

試着改變你的columnWidth中的一樣，在箱內的圖像：

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
     columnWidth: 280, 
     isAnimated: !Modernizr.csstransitions 
    }); 
}); 

更新行：

$container.append($boxes).imagesLoaded(function(){$container.masonry('appended', $boxes);}); 

到：

$container.append($boxes).masonry('appended', $boxes); 

我也認爲你應該修改您的$(document).ready部分。您目前有2個元素，並在兩者之間檢索到#container元素。我認爲你應該只有一個，並確保$container取自$(document).ready。

更新代碼：

var $test; 
var $iterator = 0; 
$(document).ready(function() { 
    $("#demo-input").tokenInput("php-example.php" ,{ 
     classes: { 
      tokenList: "token-input-list-facebook", 
      token: "token-input-token-facebook", 
      tokenDelete: "token-input-delete-token-facebook", 
      selectedToken: "token-input-selected-token-facebook", 
      highlightedToken: "token-input-highlighted-token-facebook", 
      dropdown: "token-input-dropdown-facebook", 
      dropdownItem: "token-input-dropdown-item-facebook", 
      dropdownItem2: "token-input-dropdown-item2-facebook", 
      selectedDropdownItem: "token-input-selected-dropdown-item-facebook", 
      inputToken: "token-input-input-token-facebook" 
     }, 
     hintText: "Type in the names of your Tags", 
     noResultsText: "No results", 
     searchingText: "Searching..." 
    }); 

    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
      columnWidth: 280, 
      isAnimated: !Modernizr.csstransitions 
     }); 
    }); 

    $("input[type=button]").click(function() { 
     $.ajax({ url: "generatehtml.php", 
     data: {action: $(this).siblings("input[type=text]").val()}, 
     type: 'post', 
     dataType: "json", 
     success: 
      function(response){ 
       $test=response; 
       $iterator = $test.length; 

       for (i=0; i<10; i++){ 
        var $boxes = $(balls($iterator)); 
        $container.append($boxes).masonry('appended', $boxes);    
       } 
       var $boxes = $('<div class="box" STYLE="color: rgba(255, 255, 255, 1);">These results are ranked from<BR> most similar, to least similar.<BR>The percentage below each game <BR>indicates how similar to the <BR>original input that game is.<BR></div>'); 
       $container.prepend($boxes).masonry('reload');  
      } 
     }); 
    }); 
});