jquery masonry appending images with custom sizes.

问题

Evening!

My current relevant code:

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

$(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 ).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', $boxes); 
            }
        });
    });
});


window.onscroll = scroll;

function scroll(){  
    var $boxes = $(balls($iterator));
    $container.append( $boxes ).masonry('appended', $boxes);    
    }  
//+'<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>');
}

As you can see in:

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

And

 +'img src="'+$test[$iterator][2]+'"  width="280" height="160"/>'

That the image size is being forced into 280x160, I'd like these images to be a bit more dynamic, and I'd also like there to be little space between each box, how can I do this?

Site for reference:

http://newgameplus.nikuai.net/TEST/

(Don't use first search bar.)

回答1:

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

This is actually what I needed to do all along.

回答2:

I don't know if this is the right thing to do (in the jQuery Masonry world) as I've never used jQuery Masonry, but you could try the following.

First update the image creation code:

function balls($i){
    $iterator -= 1;
    var $width = 7.5;
    return ('<div class="box">'
    +'<p>'+$test[$iterator][1][2]+'</p>'
    +'<img src="'+$test[$iterator][2]+'"/>'
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    +'</div>');
}

Replace the following CSS:

.box img, #tumblelog img {
    display: block;
    width: 100%;
}

with:

.box img, #tumblelog img {
    display: table-cell;
    max-width: 280px;
    max-height: 160px;
}

And add the following CSS:

.box {
    width: 280px;
    display: table-row;
    text-align: center;
}

.box p {
    margin-bottom: 0;
    overflow: hidden;  // hide the overflow of text
}

来源：https://stackoverflow.com/questions/11170735/jquery-masonry-appending-images-with-custom-sizes