1

夜！

私の現在の関連コード: 

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

あなたが見ることができるように：

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

と

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

画像サイズが 280x160 に強制されていること、これらの画像をもう少し動的にしたい、また各ボックス間のスペースを小さくしたいのですが、どうすればよいですか?

参考サイト：

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

(最初の検索バーは使用しないでください。)

4

2 に答える 2

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

これは実際に私がずっとやらなければならなかったことです。

于 2012-06-23T20:32:56.687 に答える
0

jQuery Masonry を使用したことがないので、これが (jQuery Masonry の世界で) 正しいことかどうかはわかりませんが、次のことを試すことができます。

最初にイメージ作成コードを更新します。

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

次の CSS を置き換えます。

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

と：

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

そして、次の CSS を追加します。

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

.box p {
    margin-bottom: 0;
    overflow: hidden;  // hide the overflow of text
}
于 2012-06-23T15:51:40.097 に答える