我在wookmark插件中调整了这个脚本，当用户滚动到页面底部时，从数据库中加载更多项目。
最初它预先加载图像然后创建布局，但是当用户滚动到底部时，新项目通过ajax加载，但图像都相互重叠。
我正在使用imagesloaded jquery插件在第一次加载页面时正确显示图像，但是当用户滚动到底部时添加新项目时我无法使其工作。
这是我的代码：
$(document).imagesLoaded(function() {
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 10, // Optional, the distance between grid items
itemWidth: 320 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// When scrolled all the way to the bottom, add more tiles.
var int = 10;
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if(closeToBottom) {
// GET THE 10 NEXT ITEMS;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("tiles").innerHTML=xmlhttp.responseText;
$('#tiles').append(innerHTML=xmlhttp.responseText);
int = int+10;
// Clear our previous layout handler.
if(handler) handler.wookmarkClear();
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
}
}
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
var request = $.getUrlVar('item');
if(request!=null){
var allR = "?int="+int+"&item="+request;
} else {
var allR = "?int="+int;
}
xmlhttp.open("GET","tiles.php"+allR,true);
xmlhttp.send();
}
};
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
// Call the layout function.
handler = $('#tiles li');
handler.wookmark(options);
});
});
});
提前致谢。
答案 0 :(得分：1)
最后我忘记尝试最简单的事情，在imagesLoaded中包装handler.wookmark：
$(document).imagesLoaded(function() {
handler.wookmark(options);
});
完整代码：
$(document).imagesLoaded(function() {
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 10, // Optional, the distance between grid items
itemWidth: 320 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// When scrolled all the way to the bottom, add more tiles.
var int = 10;
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if(closeToBottom) {
// GET THE 10 NEXT ITEMS;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("tiles").innerHTML=xmlhttp.responseText;
$('#tiles').append(innerHTML=xmlhttp.responseText);
int = int+10;
// Clear our previous layout handler.
if(handler) handler.wookmarkClear();
// Create a new layout handler.
handler = $('#tiles li');
$(document).imagesLoaded(function() {
handler.wookmark(options);
});
$(function() {
// Select all links whose attribute rel starts with lightbox
$('a[rel^=lightbox]').lightBox();
});
var scripts = domElement.getElementsByTagName("script");
for (var i = 0; i < scripts; i ++) {
eval(scripts[i].text);
}
}
}
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
var request = $.getUrlVar('item');
if(request!=null){
var allR = "?int="+int+"&item="+request;
} else {
var allR = "?int="+int;
}
if(end==0){
xmlhttp.open("GET","tiles.php"+allR,true);
xmlhttp.send();
}
}
};
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
// Call the layout function.
handler = $('#tiles li');
handler.wookmark(options);
});
});
});
答案 1 :(得分：0)
我建议你使用像getJson，getAjax这样的jquery ajax函数。