jQuery的石工图像追加 [英] jquery masonry image append
问题描述
晚上好，
我遇到了砌体问题。
这是我所有的相关代码：
var $ test;
var $ iterator = 0;
$（document）.ready（function（）{
$（＃demo-input）。tokenInput（php-example.php，{$ b $ classes：{
令牌列表：token-input-list-facebook，
token：token-input-token-facebook，
tokenDelete：token-input-delete-token-facebook，
selectedToken：token-input-selected-token-facebook，
highlightsToken：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：输入您的标签的名称，
noResultsText： 没有结果，
searchingText：Searching ...
}）;
}）;
var $ container = $（'＃container'）;
$ container.imagesLoaded（function（）{
$ container.masonry（{
itemSelector：'.box'，
columnWidth：1，
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，
成功：
函数（响应）{
$ test =响应;
$ iterator = $ test.length;
for（i = 0; i <10; i ++）{
var $ boxes = $（balls（$ iterator））;
$ container.append（$ boxes）.imagesLoaded（function（ ）{$ container.masonry（'added'，$ boxes）;}）;
}
var $ boxes = $（'< div class =boxSTYLE =color：rgba（255 ，255,255,1）;>这些结果从最相似的到最不相似的排列。BR每个游戏以下的百分比指示与原始输入有多相似该游戏是。< /< / div>'）;
$ container.prepend（$ boxes）.masonry（'reload'）;
}
}）;
}）;
}）;
window.onscroll = scroll;
function scroll（）{
var $ boxes = $（balls（$ iterator））;
$ container.append（$ boxes）.imagesLoaded（function（）{$ container.masonry（'added'，$ boxes，true）;}）;
// +'< img src =timthumb.php？src ='+ $ test [$ iterator] [2] +'& q = 100& w = 300/> ;'将timthumb列入白名单时，将其替换为下面的代码
函数球（$ i）{
$ iterator - = 1;
var $ width = 7.5;
return（'< div class =box>'
+''+ $ test [$ iterator] [1] [2] +''
+'< img src ='+ $ test [$ iterator] [2] +'width =280height =160/>'
+'< div id = boxBottom>'+ Math.floor（ $ test [$ iterator] [0] * 100）+'％< / div>'
+'< / div>'）;
行为我期望：
载入页面，从第二个搜索栏中选择游戏，点击'submit'。
在滚动时填充10个结果，填充更多结果。
但是格式化已经遍布全球，我知道你应该使用imagesLoaded（）插件，但我确实需要。
无论如何，这里是有问题的网站：
http://newgameplus.nikuai.net/TEST/
（第一个搜索栏不能顺利运行，所以忽略它）
任何分辨率将不胜感激。非常感谢。
尝试将columnWidth更改为与框中图像相同：
$ container.imagesLoaded（function（）{
$ container.masonry（{
itemSelector：'.box'，
columnWidth：280 ，
isAnimated：！Modernizr.csstransitions
}）;
}）;
更新行：
$ container.append（$ boxes）.imagesLoaded（function（）{$ container.masonry（'added'，$ boxes）;}）;
到：
$ container.append（$ boxes）.masonry（'added'，$ boxes）;
我也认为你应该修改你的 更新的代码： Good evening, I'm having an issue with Masonry. This is all my relevant code:
The behaviour I expect:
Load page, select game from second search bar, hit 'submit'. But the formatting is all over the place, and I know you're supposed to use the imagesLoaded() plugin, but I do. Anyway, here is the site in question: http://newgameplus.nikuai.net/TEST/
(First search bar doesn't work btw, so ignore that) Any resolution would be greatly appreciated. Thanks so very much. Try changing your columnWidth to the same as the image in the box: Update the line: to: I also think you should revise your Updated code:
这篇关于jQuery的石工图像追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ $（document）.ready 部分。您目前有2个，并且 #container 元素在两者之间被检索。我认为你应该只有一个，并确保在 $（document）.ready 中获取 $ container 。
var $ test;
var $ iterator = 0;
$（document）.ready（function（）{
$（＃demo-input）。tokenInput（php-example.php，{$ b $ classes：{
令牌列表：token-input-list-facebook，
token：token-input-token-facebook，
tokenDelete：token-input-delete-token-facebook，
selectedToken：token-input-selected-token-facebook，
highlightsToken：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：输入您的标签的名称，
noResultsText： 没有结果，
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（）}，
类型：'post'，
dataType：json，
成功： （i = 0; i <10; i ++）的
函数（响应）{
$ test = response;
$ iterator = $ test.length;
{
var $ boxes = $（balls（$ iterator））;
$ container.append（$ boxes）.masonry（'added'，$ boxes）;
}
var $ boxes = $（'< div class =boxSTYLE =color：rgba（255，255，255，1）;>这些结果从< BR>最相似到最不相似<<<<<<<<< ; BR>每个游戏以下的百分比指示与游戏的原始输入有多相似。< BR>< / div>'）;
$ container.prepend（$ box ）。石工（ '重新加载'）;
}
}）;
}）;
}）;
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: 1,
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 ).imagesLoaded( function(){$container.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' );
}
});
});
});
window.onscroll = scroll;
function scroll() {
var $boxes = $(balls($iterator));
$container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes, true);});
}
//+'<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>');
}
Populate with 10 results, upon scrolling, populate with more results. $container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 280,
isAnimated: !Modernizr.csstransitions
});
});
$container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes);});
$container.append( $boxes ).masonry('appended', $boxes);
$(document).ready sections. You currently have 2 of them and the #container element is retrieved between the two. I think you should only have the one and make sure the $container is fetched in the $(document).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' );
}
});
});
});
