jquery - Using Masonry plugin for JSON blog feed -
json code works fine can't figure out how masonry work in displaying articles. blog articles display if not using masonry. i've checked documentation , there similar question here not duplicate! insight appreciated.
here code:
javascript/jquery:
$(window).load(function() { $.getjson("http://www.freecodecamp.com/stories/hotstories", function(news){ var length = news.length; // alert(length); (var = 0; i<length; i++) { var story = news[i], image = story["image"], link = story["link"]; //number of comments 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 loop });//end getjson , function //plugin 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; } { 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>
maybe try
$("<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 loop $('#newscontainer').imagesloaded(function(){ $('#newscontainer').masonry({ itemselector : '.newsstory' ); }); });//end getjson , function });// end document.ready in case,i guess better
<script src='jquery.min.js'></script> <script src="jquery.masonry.min.js"></script>
Comments
Post a Comment