On my webpage, I have multiple divs displayed in a masonry layout. The masonry effect works smoothly, but I am facing an issue with the divs expanding in height when users leave comments. The masonry layout does not automatically adjust to accommodate the increased div height.
These divs are reloaded using ajax.
<script>
$(document).ready(function() {
var $container = $('#REATinsidEpoASttt78');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.realFLOAtingPOSTSA',
columnWidth : 350
});
});
});
</script>
The code snippet above sets up the masonry layout. Now, let's look at the div reloading functionality.
function formsubmitionbyajax(obj){
var id=$(obj).attr("id");
var currentform = $(obj);
$('#COMMlo'+id).show();
$.ajax({ type: 'post',
url: 'home_formhandler1.php',
data: currentform.serialize(),
success: function(){
$("#mainDIV"+id).load('home.php #mainDIV'+id);
}
});
return false;
}
Here is a snippet of the HTML structure:
<div id="REATinsidEpoASttt78">
<div class="realFLOAtingPOSTSA">
<div id="mainDIVffrmMN<?=$THE_DTAinar['id']?>">
content retrieved from the database...
</div>
</div>
</div>
I am looking for a solution to dynamically rearrange the divs whenever their height changes. Currently, I am using the following approach:
var container = document.querySelector('#REATinsidEpoASttt78');
var msnry = new Masonry( container, {
columnWidth: 350
});
setTimeout(function () { msnry.layout(); }, 2000);
Although this method works, it introduces a 2-second delay in rearranging the divs. I am seeking a more efficient solution. Can anyone provide suggestions?