![story]( "story")
本文介绍了使用Masonry插件进行JSON博客提要的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述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.readyCSS: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 >>推荐答案 这篇关于使用Masonry插件进行JSON博客提要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-12 23:44