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>
答案 0 :(得分:0)
也许你可以试试
$("<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>