当用户滚动到页面底部时,我从 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);
});
});
});
提前致谢。