Using Masonry plugin for JSON blog feed

Question

0.00/5 (No votes)

See more:

XML

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

>

Posted 13-Jul-15 16:14pm

Gwendolyn Faraday

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Using Masonry plugin for JSON blog feed

Add your solution here

Preview 0

Using Masonry plugin for JSON blog feed

Add your solution here

Preview 0

Existing Members

...or Join us