Javascript jquery图像附加

晚上好,

我对砖石有意见

这是我所有的相关代码：

var$test；
var$iterator=0；
$（文档）.ready（函数（）{
$（“#演示输入”）.tokenInput（“php example.php”{
课程：{
令牌列表：“令牌输入列表”，
令牌：“令牌输入令牌facebook”，
令牌删除：“令牌输入删除令牌facebook”，
selectedToken：“令牌输入选定令牌facebook”，
highlightedToken：“令牌输入突出显示令牌facebook”，
下拉菜单：“令牌输入下拉菜单facebook”，
dropdownItem:“令牌输入下拉项facebook”，
dropdownItem2:“token-input-dropdown-item2-facebook”，
selectedDropdownItem:“令牌输入选定下拉项facebook”，
inputToken：“令牌输入令牌facebook”
},
hintText:“输入标签的名称”，
noResultsText：“没有结果”，
searchingText:“正在搜索…”
});
});
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
列宽：1，
我说：！现代化
});
});
$（文档）.ready（函数（）{
$（“输入[类型=按钮]”）。单击（函数（）{
$.ajax（{url:“generatehtml.php”，
数据：{action:$（this）.sibbins（“输入[type=text]”）.val（）}，
键入：“post”，
数据类型：“json”，
成功：
功能（响应）{
$test=响应；
$iterator=$test.length；
对于（i=0；i尝试将列宽度更改为与框中的图像相同：

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

更新行：

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

致：

我还认为您应该修改
$（文档）.ready
部分。您当前有两个部分，并且在这两个部分之间检索
#container
元素。我认为您应该只拥有一个部分，并确保
$container
已在
$（文档）.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' );       
            }
        });
    });
});

var$test；
var$iterator=0；
$（文档）.ready（函数（）{
$（“#演示输入”）.tokenInput（“php example.php”{
课程：{
令牌列表：“令牌输入列表”，
令牌：“令牌输入令牌facebook”，
令牌删除：“令牌输入删除令牌facebook”，
selectedToken：“令牌输入选定令牌facebook”，
highlightedToken：“令牌输入突出显示令牌facebook”，
下拉菜单：“令牌输入下拉菜单facebook”，
dropdownItem:“令牌输入下拉项facebook”，
dropdownItem2:“token-input-dropdown-item2-facebook”，
selectedDropdownItem:“令牌输入选定下拉项facebook”，
inputToken：“令牌输入令牌facebook”
},
hintText:“输入标签的名称”，
noResultsText：“没有结果”，
searchingText:“正在搜索…”
});
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
列宽：280，
我说：！现代化
});
});
$（“输入[类型=按钮]”）。单击（函数（）{
$.ajax（{url:“generatehtml.php”，
数据：{action:$（this）.sibbins（“输入[type=text]”）.val（）}，
键入：“post”，
数据类型：“json”，
成功：
功能（响应）{
$test=响应；
$iterator=$test.length；
对于（i=0；例如FireFox中仍然存在一些重叠。我认为我没有正确使用该插件，主要是因为我不知道它是如何工作的。您的测试代码有两个列宽，请仅使用值为280的一个进行更新。更新后，Chrome似乎仍能正常工作，但FireFox仍然存在问题。老实说，我的图像不会每次都具有相同的宽度，其中一些图像的大小会不同，因此我不确定它是否能正常工作。在脚本中调用imagesLoad（）后，再次调用imagesLoad（）有什么意义吗？我在这里讨论：$container.append（$box）。imagesLoaded（函数（）{$container.mash（'appended'，$box）；}）；见更新的答案，我想这是你第二次打电话给append上的imagesLoaded.Ah-ha！现在真的行了！如果你能帮我弄清楚如何去除imgsrc中的高度和宽度标记，我会称你为绅士和学者。（我问，因为这些图像看起来有点压扁。）
$container.append( $boxes ).masonry('appended', $boxes);

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' );       
            }
        });
    });
});