我jQuery Wookmark在我的网站上使用...一切正常...但是当我刷新页面时，页面布局会中断....为什么？
正确布局
使用页面刷新后布局错误F5
为什么会这样？？页面重新加载后会发生这种情况......知道为什么吗？
JS
<script type="text/javascript" src="js/jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
var handler = null;
var pageIndex = 1;
var pageCount;
var isLoading = false;
var apiURL = 'Haggler.asmx/GetCategories'
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#tiles'), // Optional, used for some extra CSS styling
offset: 17, // Optional, the distance between grid items
itemWidth: 190 // Optional, the width of a grid item
};
/**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
// Only check when we're not still waiting for data.
if (!isLoading) {
// 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) {
loadData();
}
}
};
/**
* Refreshes the layout.
*/
function applyLayout() {
// Clear our previous layout handler.
if (handler) handler.wookmarkClear();
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
};
/*
* Loads data from the API.
*/
function loadData() {
isLoading = true;
if (pageIndex == 1 || pageIndex <= pageCount) {
$('#loaderCircle').show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: apiURL,
dataType: 'json',
data: '{pageIndex:' + pageIndex + '}', // Page parameter to make sure we load new data
success: function(data) {
//alert("SSS");
isLoading = false;
$('#loaderCircle').hide();
// Increment page index for future calls.
pageIndex++;
// Create HTML for the images.
var html = '';
pageCount = data.d[1].PageCount;
var i = 0, length = data.d.length, image;
//alert(JSON.stringify(data.d));
// image = data.d[1];
// alert(image.height);
for (; i < length; i++) {
image = data.d[i];
//alert(image.height);
html += '<li class="polaroid"><div class="optionbg"></div><div class="optionback"><span>' + data.d[i].NodeName + '</span></div><div class="options"><span class="favs">14</span><span class="fav">like it!</span></div><a href="http://www.google.co.in"><img src="' + image.image + '" width="180" height="' + Math.round(image.height / image.width * 180) + '"></a></li>';
}
// Add image HTML to the page.
$('#tiles').append(html);
// Apply layout.
applyLayout();
},
error: function(result) {
//alert(JSON.stringify(result));
}
});
}
};
/**
* Receives data from the API, creates HTML for images and updates the layout
*/
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
// Load first data from the API.
loadData();
});
</script>