JSON code works fine but can't figure out how to get masonry to work in displaying articles. Blog articles display just as if I were not using masonry. I've checked the documentation and I have made various changes but cannot figure it out. Any insight would be greatly appreciated. Here is my code: Javascript/jQuery: $(window).load(function() { $.getJSON("http://www.freecodecamp.com/stories/hotStories", function(news){ var length = news.length; for (var i = 0; i<length; i++) { var story = news[i], image = story["image"], link = story["link"]; //number of comments for each article var numComments = story["comments"].length; //assign user profile pic if story has no featured image if (story["image"]===""){ // alert('hi'); image = story["author"]["picture"]; } $("<div class='newsStory'></div>") .append("<a href='"+ link +"'><img class='profile_image' src='" + image + "'></a>") .append("<a href='"+ link +"'><h3 class='headline'>"+ story["headline"] +"</h3></a>") .append("<p class='comment'>Comments: "+ numComments +"</p>") .appendTo("#newsContainer"); }// end for loop });//end getJSON and function //plugin for vertical stacking of stories called masonry $('#newsContainer').masonry({ itemSelector: '.newsStory', columnWidth: '.newsStory' }).imagesLoaded(function() { $('#newsContainer').masonry('reload'); }); });// end document.ready CSS: body { margin: none; padding: none; font-family: 'Almendra', serif; background-color: #8DE2FF; } a { text-decoration: none; } header h1, header p { text-align: center; color: #FF6699; } header h1 { font-weight: 500; font-size: 3em; margin-bottom: -20px; } header p { font-weight: 200; font-size: 2em; margin-bottom: 40px; font-family: 'Satisfy', cursive; } #newsContainer { width: 90%; margin: 5px auto; clear: both; } .newsStory { width: 20%; /* height: 200px;*/ margin: 1.2%; display: inline-block; float: left; background-color: #916C47; border: 10px solid #826140; border-radius: 5px; } .profile_image { display: block; width: 80%; margin: 7px auto; border-bottom: 3px solid #AEEAFF; } .headline { margin: 4px; text-align: center; color: #FFC1D6; } .comment { color: #AEEAFF; margin: 10px; font-family: sans-serif; font-weight: 200; } HTML: <!DOCTYPE html> <html> <head> <title>Code Camp Feed</title> <link href='http://fonts.googleapis.com/css?family=Satisfy|Almendra:400italic,700italic' rel='stylesheet'> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> <link rel='stylesheet' href='main.css'> <script src='jquery-1.11.3.min.js'></script> <script src='script.js'></script> </head> <body> <header> <h1>Free Code Camp</h1> <p>Camper News</p> </header> <div id='newsContainer' class='js-masonry clearfix'> </div> </body> </html
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)