晚上!
我当前的相关代码:
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/
(不要使用第一个搜索栏。)