{"action":"created","issue":{"url":"https://api.github.com/repos/desandro/masonry/issues/714","labels_url":"https://api.github.com/repos/desandro/masonry/issues/714/labels{/name}","comments_url":"https://api.github.com/repos/desandro/masonry/issues/714/comments","events_url":"https://api.github.com/repos/desandro/masonry/issues/714/events","html_url":"https://github.com/desandro/masonry/issues/714","id":89327978,"number":714,"title":"masonry layout sometimes working and sometimes not working with the same code","user":{"login":"tayoeu","id":11962027,"avatar_url":"https://avatars.githubusercontent.com/u/11962027?v=3","gravatar_id":"","url":"https://api.github.com/users/tayoeu","html_url":"https://github.com/tayoeu","followers_url":"https://api.github.com/users/tayoeu/followers","following_url":"https://api.github.com/users/tayoeu/following{/other_user}","gists_url":"https://api.github.com/users/tayoeu/gists{/gist_id}","starred_url":"https://api.github.com/users/tayoeu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tayoeu/subscriptions","organizations_url":"https://api.github.com/users/tayoeu/orgs","repos_url":"https://api.github.com/users/tayoeu/repos","events_url":"https://api.github.com/users/tayoeu/events{/privacy}","received_events_url":"https://api.github.com/users/tayoeu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-06-18T15:50:25Z","updated_at":"2015-06-18T19:48:38Z","closed_at":"2015-06-18T19:48:38Z","body":"Hey I'm new to the web development business and I'm having issues with my first ever project.\r\nAt first sorry for not providing a simplified version of my issue but I don't really know how to get it done in my case. But there is a live version on www.tayo.eu/tf\r\n\r\nIf you open the work slider you'll see preview pictures of each project. If you click on the first project (Palma) it'll open the project view and masonry is working just fine. (Loading time is quit long atm I'll fix that later).\r\n\r\nBut if you refresh the page and try to open the project \"Berlin 4\" All the pictures are just showing up on the left side of the page. Masonry only works for this project if you resize the window or if you reopen the same project a second time without refreshing the page. So always the same projects are working fine with masonry while some others never work and I seem to be to blind to find the systematic behind it.\r\n\r\nI tried to exchange the pictures from a working project to a non working one - but no difference. I tried changing the order in json file, rename projects, emptying the cache. It just magically working in some cases and not in others.\r\n\r\nMaybe it isn't even a masonry problem but I'm just so lost after 2 days of trying all kinds of stuff and I'm hoping to get some help here! :)\r\n\r\nAll tested with Chrome Version 43.0.2357.124 (64-bit)\r\n\r\nSo what I do is, I'm appending images to my DOM with the following code:\r\n\r\n    $.getJSON(\"js/data.json\", function(json){\r\n\r\n             $.each(json.pictures, function () {\r\n\r\n                if(this.Project_ID == projectID){\r\n\r\n                    if(this.format == \"w\"){\r\n                        $(\".project-overview\").append('<div  class=\"item w\" data-picture_id=\"'+ this.ID +'\" data-project_id=\"' + this.Project_ID + '\" data-content= \"' + this.Project +\" \"+ this.Year + '\"><img src= ' + this.url + ' /></div>')\r\n                    }else{\r\n                        $(\".project-overview\").append('<div  class=\"item h\" data-picture_id=\"'+ this.ID +'\" data-project_id=\"' + this.Project_ID + '\" data-content= \"' + this.Project +\" \"+ this.Year + '\"><img src= ' + this.url + ' /></div>')\r\n\r\n                    }\r\n                }\r\n            });\r\n\r\nafter the images are appended,  I'm initializing masonry like this:\r\n\r\n    $(\".project-overview\").imagesLoaded(function(){\r\n              $('.project-overview').masonry({\r\n                    itemSelector: '.item',\r\n                    \"columnWidth\": '.grid-sizer',\r\n                    \"percentPosition\": true,\r\n                    \"gutter\": '.gutter-sizer-overview',\r\n                    isResizeBound: true,\r\n                    transitionDuration: '0.1s',\r\n                    isAnimated: true\r\n                });\r\n                $(\".item\").fadeTo(400,1)\r\n            })\r\n\r\nAll of the pictures are referenced in the json file like this:\r\n\r\n    {\r\n      \"Project\": \"Palma\",\r\n      \"Project_ID\": \"11\",\r\n      \"ID\": \"2\",\r\n      \"Title\": \"\",\r\n      \"preview\": false,\r\n      \"Year\": \"2015\",\r\n      \"url\": \"projects/2015/palma/Palma_02.jpg\",\r\n      \"format\": \"h\"\r\n    }"},"comment":{"url":"https://api.github.com/repos/desandro/masonry/issues/comments/113270122","html_url":"https://github.com/desandro/masonry/issues/714#issuecomment-113270122","issue_url":"https://api.github.com/repos/desandro/masonry/issues/714","id":113270122,"user":{"login":"desandro","id":85566,"avatar_url":"https://avatars.githubusercontent.com/u/85566?v=3","gravatar_id":"","url":"https://api.github.com/users/desandro","html_url":"https://github.com/desandro","followers_url":"https://api.github.com/users/desandro/followers","following_url":"https://api.github.com/users/desandro/following{/other_user}","gists_url":"https://api.github.com/users/desandro/gists{/gist_id}","starred_url":"https://api.github.com/users/desandro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/desandro/subscriptions","organizations_url":"https://api.github.com/users/desandro/orgs","repos_url":"https://api.github.com/users/desandro/repos","events_url":"https://api.github.com/users/desandro/events{/privacy}","received_events_url":"https://api.github.com/users/desandro/received_events","type":"User","site_admin":false},"created_at":"2015-06-18T19:48:38Z","updated_at":"2015-06-18T19:48:38Z","body":"I'm sorry to see you're having trouble with Masonry.\r\n\r\nThere are several issues going on.\r\n\r\n1. Newly appended items are not being added to the Masonry instance. Use the [`appended` method](http://masonry.desandro.com/methods.html#appended)\r\n2. I'm not sure how a user can switch between projects. One way would be to remove previous items from the `overview` elements before adding new ones.\r\n\r\nMy recommendation is to try and get this working without Masonry. After that's in place, go back and add Masonry back. One thing at a time."}}