jquery masonry добавляет изображения с пользовательскими размерами.

Вечер!

Мой текущий код:

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 = $( '
These results are ranked from
most similar, to least similar.
The percentage below each game
indicates how similar to the
original input that game is.
' ); $container.prepend( $boxes ).masonry('reload', $boxes); } }); }); }); window.onscroll = scroll; function scroll(){ var $boxes = $(balls($iterator)); $container.append( $boxes ).masonry('appended', $boxes); } //+'' Replace this with the one below when timthumb is whitelisted function balls($i){ $iterator -= 1; var $width = 7.5; return ('
' +''+$test[$iterator][1][2]+'' +'' +'
'+Math.floor($test[$iterator][0]*100)+'%
' +'
'); }

Как вы можете видеть в:

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

А также

  +'img src="http://sofru.miximages.com/jquery/'+$test[$iterator][2]+'" width="280" height="160"/>' 

Чтобы размер изображения вставлялся в 280×160, я бы хотел, чтобы эти изображения были более динамичными, и я также хотел бы, чтобы между каждой коробкой было мало места, как я могу это сделать?

Сайт для справки:

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

(Не используйте первую панель поиска.)

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

Это на самом деле то, что мне нужно было делать все это время.

Я не знаю, правильно ли это делать (в мире масонства jQuery), поскольку я никогда не использовал jQuery Masonry, но вы могли бы попробовать следующее.

Сначала обновите код создания изображения:

 function balls($i){ $iterator -= 1; var $width = 7.5; return ('
' +'

'+$test[$iterator][1][2]+'

' +'' +'
'+Math.floor($test[$iterator][0]*100)+'%
' +'
'); }

Замените следующий 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 }