Jasbir Bhinder Jasbir Bhinder - 1 year ago 51
ASP.NET (C#) Question

On refreshing page masonry work ok, but first time overlaps

When my page load first time masonry overlaps images, and if i refresh page it start work fine. i dnt have any idea what i did wrong. my page link is this www.bhinderblink.com

<script type="text/javascript">
$(window).load(function () {
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true,
isFitWidth: true,
animationOptions: {
duration: 650,
easing: 'linear',
queue: false


On Success of .ajax, it fetch data from xmlobject...

function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);

pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

var pic_infoVar = xml.find("pic_info");

pic_infoVar.each(function () {
var customer = $(this);

var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>");
$("#container").append($picString).masonry('appended', $picString, true);


$("body").css({ "opacity": "100" });

Answer Source

I also has the similar issue, images were overlapping at the first loading time. I overcome this by first loading the images.

                itemSelector: '.scrapcontent',
                columnWidth: 3,
                animationOptions: {
                    duration: 700,
                    queue :false

If the images are loaded then only your masonry's duty has to start.It should work fine.