Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website.
To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this:
$(window).load(function(){
$('#buildcontainer').waterfall({
colMinWidth: 260,
defaultContainerWidth: 1000,
autoresize: true
});
});
The root cause of the image overlap problem is that the waterfall function is invoked before the images are fully loaded, leading to undetermined heights. By placing the function inside the load event, this issue is mitigated.
However, a new challenge arises when loading more database results via ajax and appending them to the container.
Upon appending items, the images overlap once again. Fortunately, jQuery waterfall provides a 'reflow' function to reorganize the items within the container.
In the ajax success section, I implement it as follows:
success: function(html) {
$("#buildcontainer").append(html).waterfall('reflow');
}
An observation is that the images are appended first, followed by invoking the waterfall function, but the images are not fully loaded at that point.
Is there a way to trigger the waterfall('reflow') only after all items are completely loaded? Similar to the concept of:
$(window).load(function(){
});
I have attempted enclosing the line where items are appended in this function, as well as directly appending the items and subsequently applying reflow within a .load function, yet both approaches do not append any items.
If anyone has suggestions or ideas on what steps to take next, your input would be greatly appreciated. Thank you!
Note: The image overlap occurs in Chrome and Safari browsers, but not in Firefox.
Thank you!