将 Masonry 插件用于 JSON 博客提要

Question

JSON 代码工作正常，但无法弄清楚如何让砌体在显示文章时发挥作用。博客文章的显示就像我没有使用砌体一样。我检查了文档，有一个类似的问题 here 但它不是重复的！任何见解将不胜感激。

这是我的代码：

Javascript/jQuery:

$(window).load(function() {

    $.getJSON("http://www.freecodecamp.com/stories/hotStories", function(news){

        var length = news.length;
//      alert(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>

Answer 1

也许你可以试试

    $("<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
    $('#newsContainer').imagesLoaded(function(){
        $('#newsContainer').masonry({
            itemSelector : '.newsStory'
            );
        });    
    });//end getJSON and function
});// end document.ready

在你的情况下，我想这样会更好

<script src='jquery.min.js'></script>
<script src="jquery.masonry.min.js"></script>

将 Masonry 插件用于 JSON 博客提要

Using Masonry plugin for JSON blog feed

html

jquery

json

jquery-masonry

masonry