瀑布流 ajax 预载入 json
Posted yfceshi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流 ajax 预载入 json相关的知识，希望对你有一定的参考价值。
pbl.json【模拟后台json数据】:
[
{
"id": "511895",
"title": "Smashicons: 300 Free Icons | GraphicBurger",
"referer": "http://graphicburger.com/smashicons-300-free-icons/",
"url": "http://www.wookmark.com/image/511895/smashicons-300-free-icons-graphicburger",
"width": "600",
"height": "14328",
"image": "http://www.wookmark.com/images/original/511895_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511895_wookmark.jpg"
},
{
"id": "512237",
"title": "Inspirationde - Source of design & inspiration",
"referer": "http://www.inspirationde.com/image/38001/",
"url": "http://www.wookmark.com/image/512237/inspirationde-source-of-design-inspiration",
"width": "400",
"height": "575",
"image": "http://www.wookmark.com/images/original/512237_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512237_wookmark.jpg"
},
{
"id": "512412",
"title": "Bull / Logo Design by simc",
"referer": "https://dribbble.com/shots/2076196-Bull-Logo-Design?list=users&offset=0",
"url": "http://www.wookmark.com/image/512412/bull-logo-design-by-simc",
"width": "800",
"height": "600",
"image": "http://www.wookmark.com/images/original/512412_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512412_wookmark.png"
},
{
"id": "512550",
"title": "Female Portraits by Maxim Gurtovoy",
"referer": "https://portrait.photogrist.com/maxim-gurtovoy/",
"url": "http://www.wookmark.com/image/512550/female-portraits-by-maxim-gurtovoy",
"width": "1280",
"height": "854",
"image": "http://www.wookmark.com/images/original/512550_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512550_wookmark.jpg"
},
{
"id": "512116",
"title": "Card Wallet on Inspirationde",
"referer": "http://www.inspirationde.com/image/37992/",
"url": "http://www.wookmark.com/image/512116/card-wallet-on-inspirationde",
"width": "640",
"height": "1136",
"image": "http://www.wookmark.com/images/original/512116_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512116_wookmark.png"
},
{
"id": "512301",
"title": "Pin von Mike Hsu auf Transportation Design Sketch | Pinterest",
"referer": "https://de.pinterest.com/pin/451345193880430669/",
"url": "http://www.wookmark.com/image/512301/pin-von-mike-hsu-auf-transportation-design-sketch-pinterest",
"width": "524",
"height": "960",
"image": "http://www.wookmark.com/images/original/512301_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512301_wookmark.jpg"
},
{
"id": "512705",
"title": "Inspirationde - Source of design & inspiration",
"referer": "http://www.inspirationde.com/image/38103/",
"url": "http://www.wookmark.com/image/512705/inspirationde-source-of-design-inspiration",
"width": "500",
"height": "750",
"image": "http://www.wookmark.com/images/original/512705_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512705_wookmark.jpg"
},
{
"id": "512735",
"title": "Multilayered Parallax on Inspirationde",
"referer": "http://www.inspirationde.com/image/38159/",
"url": "http://www.wookmark.com/image/512735/multilayered-parallax-on-inspirationde",
"width": "770",
"height": "2031",
"image": "http://www.wookmark.com/images/original/512735_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512735_wookmark.png"
},
{
"id": "512770",
"title": "+",
"referer": "http://dmitrievdesign.blogspot.de/",
"url": "http://www.wookmark.com/image/512770",
"width": "1600",
"height": "1131",
"image": "http://www.wookmark.com/images/original/512770_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512770_wookmark.jpg"
},
{
"id": "512994",
"title": "Vifa Remote | Product Design | Pinterest",
"referer": "https://www.pinterest.com/pin/58476495138565211/",
"url": "http://www.wookmark.com/image/512994/vifa-remote-product-design-pinterest",
"width": "480",
"height": "521",
"image": "http://www.wookmark.com/images/original/512994_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512994_wookmark.jpg"
},
{
"id": "511896",
"title": "Inspirationde - Source of design & inspiration",
"referer": "http://www.inspirationde.com/image/37955/",
"url": "http://www.wookmark.com/image/511896/inspirationde-source-of-design-inspiration",
"width": "770",
"height": "1161",
"image": "http://www.wookmark.com/images/original/511896_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511896_wookmark.jpg"
},
{
"id": "511897",
"title": "physical sculpture of data on Inspirationde",
"referer": "http://www.inspirationde.com/image/17783/",
"url": "http://www.wookmark.com/image/511897/physical-sculpture-of-data-on-inspirationde",
"width": "480",
"height": "720",
"image": "http://www.wookmark.com/images/original/511897_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511897_wookmark.jpg"
},
{
"id": "511898",
"title": "subcreative_freelance_designer.jpg (1310×5856)",
"referer": "",
"url": "http://www.wookmark.com/image/511898/subcreative-freelance-designer-jpg-1310-5856",
"width": "1310",
"height": "5856",
"image": "http://www.wookmark.com/images/original/511898_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511898_wookmark.jpg"
},
{
"id": "512044",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "http://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "http://www.wookmark.com/image/512044/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "460",
"image": "http://www.wookmark.com/images/original/512044_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512044_wookmark.jpg"
},
{
"id": "512128",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "http://www.wookmark.com/image/512128",
"width": "500",
"height": "500",
"image": "http://www.wookmark.com/images/original/512128_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512128_wookmark.jpg"
},
{
"id": "512158",
"title": "Inspiration - Define a room‘s focal point with bolder colours - Muuto",
"referer": "http://www.muuto.com/inspiration/Define_a_rooms_focal_point_with_bolder_colours/",
"url": "http://www.wookmark.com/image/512158/inspiration-define-a-room-s-focal-point-with-bolder-colours-muuto",
"width": "544",
"height": "707",
"image": "http://www.wookmark.com/images/original/512158_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512158_wookmark.jpg"
},
{
"id": "512239",
"title": "Inspirationde - Source of design & inspiration",
"referer": "http://www.inspirationde.com/image/37997/",
"url": "http://www.wookmark.com/image/512239/inspirationde-source-of-design-inspiration",
"width": "770",
"height": "481",
"image": "http://www.wookmark.com/images/original/512239_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512239_wookmark.jpg"
},
{
"id": "512251",
"title": "Digital Art Vision of Ecuador | Abduzeedo Design Inspiration",
"referer": "http://abduzeedo.com/digital-art-vision-ecuador",
"url": "http://www.wookmark.com/image/512251/digital-art-vision-of-ecuador-abduzeedo-design-inspiration",
"width": "900",
"height": "601",
"image": "http://www.wookmark.com/images/original/512251_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512251_wookmark.jpg"
},
{
"id": "512252",
"title": "Digital Art Vision of Ecuador | Abduzeedo Design Inspiration",
"referer": "http://abduzeedo.com/digital-art-vision-ecuador",
"url": "http://www.wookmark.com/image/512252/digital-art-vision-of-ecuador-abduzeedo-design-inspiration",
"width": "900",
"height": "900",
"image": "http://www.wookmark.com/images/original/512252_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512252_wookmark.jpg"
},
{
"id": "512304",
"title": "Pinterest: Kreative Ideen entdecken und speichern",
"referer": "https://de.pinterest.com/pin/441212094718364590/",
"url": "http://www.wookmark.com/image/512304/pinterest-kreative-ideen-entdecken-und-speichern",
"width": "736",
"height": "886",
"image": "http://www.wookmark.com/images/original/512304_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512304_wookmark.jpg"
},
{
"id": "512350",
"title": "",
"referer": "http://www.simkom.com/sketchsite/image.php?id=143222523296659",
"url": "http://www.wookmark.com/image/512350",
"width": "800",
"height": "600",
"image": "http://www.wookmark.com/images/original/512350_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512350_wookmark.jpg"
},
{
"id": "512439",
"title": "Hong Kong Memoirs by Fan Ho",
"referer": "https://black-and-white.photogrist.com/fan-ho/",
"url": "http://www.wookmark.com/image/512439/hong-kong-memoirs-by-fan-ho",
"width": "714",
"height": "997",
"image": "http://www.wookmark.com/images/original/512439_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512439_wookmark.jpg"
},
{
"id": "512639",
"title": "Daily Inspiration #2083 | Abduzeedo Design Inspiration",
"referer": "http://abduzeedo.com/daily-inspiration-2083",
"url": "http://www.wookmark.com/image/512639/daily-inspiration-2083-abduzeedo-design-inspiration",
"width": "770",
"height": "1695",
"image": "http://www.wookmark.com/images/original/512639_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512639_wookmark.jpg"
},
{
"id": "512641",
"title": "Apartment Building in Luxembourg / Metaform Architects on Inspirationde",
"referer": "http://www.inspirationde.com/image/38084/",
"url": "http://www.wookmark.com/image/512641/apartment-building-in-luxembourg-metaform-architects-on-inspirationde",
"width": "667",
"height": "1000",
"image": "http://www.wookmark.com/images/original/512641_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512641_wookmark.jpg"
},
{
"id": "512645",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "http://www.wookmark.com/image/512645",
"width": "540",
"height": "308",
"image": "http://www.wookmark.com/images/original/512645_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512645_wookmark.jpg"
},
{
"id": "512695",
"title": "Brand New: New Logo and Identity for University of Warwick",
"referer": "http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_university_of_warwick.php?
utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ucllc%2Fbrandnew+%28Brand+New%29#.VWJ4i2RViko",
"url": "http://www.wookmark.com/image/512695/brand-new-new-logo-and-identity-for-university-of-warwick",
"width": "1000",
"height": "1190",
"image": "http://www.wookmark.com/images/original/512695_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512695_wookmark.jpg"
},
{
"id": "512754",
"title": "troublemaker",
"referer": "http://enfantdumiracle.tumblr.com/post/119753973458/misterk75-chloe-brase",
"url": "http://www.wookmark.com/image/512754/troublemaker",
"width": "500",
"height": "750",
"image": "http://www.wookmark.com/images/original/512754_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512754_wookmark.jpg"
},
{
"id": "512773",
"title": "Sketch, Tape, Sleep. Automotive sketch blog by Jack Luttig",
"referer": "http://jluttig.blogspot.de/",
"url": "http://www.wookmark.com/image/512773/sketch-tape-sleep-automotive-sketch-blog-by-jack-luttig",
"width": "1600",
"height": "723",
"image": "http://www.wookmark.com/images/original/512773_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512773_wookmark.jpg"
},
{
"id": "512775",
"title": "Snacks in Amsterdam - ADAC Reisemagazin on",
"referer": "https://www.behance.net/gallery/26362107/Snacks-in-Amsterdam-ADAC-Reisemagazin",
"url": "http://www.wookmark.com/image/512775/snacks-in-amsterdam-adac-reisemagazin-on",
"width": "1200",
"height": "1616",
"image": "http://www.wookmark.com/images/original/512775_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512775_wookmark.jpg"
},
{
"id": "512856",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "http://www.wookmark.com/image/512856/99-tumblr",
"width": "353",
"height": "530",
"image": "http://www.wookmark.com/images/original/512856_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512856_wookmark.jpg"
},
{
"id": "512949",
"title": "Inspirationde - Source of design & inspiration",
"referer": "http://www.inspirationde.com/image/38184/",
"url": "http://www.wookmark.com/image/512949/inspirationde-source-of-design-inspiration",
"width": "500",
"height": "599",
"image": "http://www.wookmark.com/images/original/512949_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512949_wookmark.jpg"
},
{
"id": "513135",
"title": "Soul/part 2 by Marc Laroche on Inspirationde",
"referer": "http://www.inspirationde.com/image/38199/",
"url": "http://www.wookmark.com/image/513135/soul-part-2-by-marc-laroche-on-inspirationde",
"width": "770",
"height": "770",
"image": "http://www.wookmark.com/images/original/513135_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/513135_wookmark.jpg"
},
{
"id": "511822",
"title": "The J20 Project (Concept) on Inspirationde",
"referer": "http://www.inspirationde.com/image/37951/",
"url": "http://www.wookmark.com/image/511822/the-j20-project-concept-on-inspirationde",
"width": "640",
"height": "457",
"image": "http://www.wookmark.com/images/original/511822_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511822_wookmark.jpg"
},
{
"id": "511845",
"title": "Pinterest: descubra e guarde ideias criativas",
"referer": "https://www.pinterest.com/pin/386113368030131521/",
"url": "http://www.wookmark.com/image/511845/pinterest-descubra-e-guarde-ideias-criativas",
"width": "736",
"height": "1472",
"image": "http://www.wookmark.com/images/original/511845_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511845_wookmark.jpg"
},
{
"id": "511873",
"title": "Pinterest: descubra e guarde ideias criativas",
"referer": "https://www.pinterest.com/pin/362047257520970869/",
"url": "http://www.wookmark.com/image/511873/pinterest-descubra-e-guarde-ideias-criativas",
"width": "475",
"height": "478",
"image": "http://www.wookmark.com/images/original/511873_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511873_wookmark.jpg"
},
{
"id": "511899",
"title": "Handlettering Artwork For Walk Ministries on Inspirationde",
"referer": "http://www.inspirationde.com/image/37959/",
"url": "http://www.wookmark.com/image/511899/handlettering-artwork-for-walk-ministries-on-inspirationde",
"width": "770",
"height": "770",
"image": "http://www.wookmark.com/images/original/511899_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511899_wookmark.jpg"
},
{
"id": "511906",
"title": "Friend.Ship by NaBHaN on DeviantArt",
"referer": "http://nabhan.deviantart.com/art/Friend-Ship-487783671",
"url": "http://www.wookmark.com/image/511906/friend-ship-by-nabhan-on-deviantart",
"width": "650",
"height": "650",
"image": "http://www.wookmark.com/images/original/511906_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/511906_wookmark.png"
},
{
"id": "511907",
"title": "Cool by NaBHaN on DeviantArt",
"referer": "http://nabhan.deviantart.com/art/Cool-502329624",
"url": "http://www.wookmark.com/image/511907/cool-by-nabhan-on-deviantart",
"width": "650",
"height": "650",
"image": "http://www.wookmark.com/images/original/511907_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/511907_wookmark.png"
},
{
"id": "511920",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "http://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "http://www.wookmark.com/image/511920/mellow-electric-drive-skateboards-hiconsumption",
"width": "960",
"height": "640",
"image": "http://www.wookmark.com/images/original/511920_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511920_wookmark.jpg"
},
{
"id": "511921",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "http://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "http://www.wookmark.com/image/511921/mellow-electric-drive-skateboards-hiconsumption",
"width": "630",
"height": "420",
"image": "http://www.wookmark.com/images/original/511921_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511921_wookmark.jpg"
},
{
"id": "511923",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "http://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "http://www.wookmark.com/image/511923/mellow-electric-drive-skateboards-hiconsumption",
"width": "630",
"height": "420",
"image": "http://www.wookmark.com/images/original/511923_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/511923_wookmark.jpg"
},
{
"id": "512001",
"title": "screen-shot-2014-09-22-at-2.12.12-pm.png (1506×1518)",
"referer": "https://www.google.com/",
"url": "http://www.wookmark.com/image/512001/screen-shot-2014-09-22-at-2-12-12-pm-png-1506-1518",
"width": "1506",
"height": "1518",
"image": "http://www.wookmark.com/images/original/512001_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512001_wookmark.png"
},
{
"id": "512039",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "http://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "http://www.wookmark.com/image/512039/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "362",
"image": "http://www.wookmark.com/images/original/512039_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512039_wookmark.jpg"
},
{
"id": "512040",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "http://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "http://www.wookmark.com/image/512040/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "479",
"image": "http://www.wookmark.com/images/original/512040_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512040_wookmark.jpg"
},
{
"id": "512043",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "http://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "http://www.wookmark.com/image/512043/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "460",
"image": "http://www.wookmark.com/images/original/512043_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512043_wookmark.jpg"
},
{
"id": "512047",
"title": "spalvierdelciotto designs a LED desk lamp for lexon",
"referer": "http://www.designboom.com/design/spalvierdelciotto-led-desk-lamp-05-18-2015/",
"url": "http://www.wookmark.com/image/512047/spalvierdelciotto-designs-a-led-desk-lamp-for-lexon",
"width": "818",
"height": "472",
"image": "http://www.wookmark.com/images/original/512047_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512047_wookmark.jpg"
},
{
"id": "512103",
"title": "Changes",
"referer": "http://overcalm.co.vu/post/119516785288",
"url": "http://www.wookmark.com/image/512103/changes",
"width": "548",
"height": "629",
"image": "http://www.wookmark.com/images/original/512103_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512103_wookmark.png"
},
{
"id": "512182",
"title": "Unseen Cuba by Marius Jovai?a",
"referer": "https://aerial.photogrist.com/marius-jovaisa/",
"url": "http://www.wookmark.com/image/512182/unseen-cuba-by-marius-jovai-a",
"width": "1180",
"height": "785",
"image": "http://www.wookmark.com/images/original/512182_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512182_wookmark.jpg"
},
{
"id": "512193",
"title": "It looks better in black",
"referer": "https://www.facebook.com/itlooksbetterinblack/photos/pb.616706738402860.-2207520000.1432248795./874942449245953/?type=1&theater",
"url": "http://www.wookmark.com/image/512193/it-looks-better-in-black",
"width": "500",
"height": "750",
"image": "http://www.wookmark.com/images/original/512193_wookmark.png",
"preview": "http://www.wookmark.com/images/thumbs/512193_wookmark.png"
},
{
"id": "512225",
"title": "Matt‘s Mini-ITX - Album on Imgur",
"referer": "http://imgur.com/a/e8lFa",
"url": "http://www.wookmark.com/image/512225/matt-s-mini-itx-album-on-imgur",
"width": "3264",
"height": "2448",
"image": "http://www.wookmark.com/images/original/512225_wookmark.jpg",
"preview": "http://www.wookmark.com/images/thumbs/512225_wookmark.jpg"
}
]
html文件【这里使用jquery】：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>jquery随机图片瀑布流无限载入</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.clearFixed:after{content:"";display: block;clear:both;}
/* container */
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:20px;}
#container ul li img{width:300px;}
li p{color:#ccc;font-size: 16px;}
li a{color:#ccc;line-height:32px;text-decoration: none;}
li a:hover{text-decoration: underline;}
#load{width:100%;height:50px;display:none;position:fixed;left:0;bottom:0;background: rgba(0,0,0,.6);}
#load img{height:30px;padding-top:10px;display: block;margin:0 auto;}
</style>
</head>
<body>
<div id="container" class="clearFixed">
<ul class="col"></ul>
<ul class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
</div>
<div id="load"><img src="images/load.gif"/></div>
</body>
</html>
<script type="text/javascript" src="jquery1.42.min.js"></script>
<script type="text/javascript">
$(function(){
var iNow=1;
var imgs=[];
function loadMeinv(){
$.ajax({
url:"pbl.json",
type:"post",
success:function(data)
{
// alert(iNow);
imgs=[];//清空数组
for(var v=iNow-1;v<iNow*9;v++)//新建暂时数组
{
if(data[v]==undefined)
{
$("#load").fadeOut();//假设没有数据了 就隐藏load。而且不再载入
return false;
}
else
{
imgs.push([data[v]["image"],data[v]["title"],data[v]["url"]]);
}
}
//console.table(imgs);
var prepress=0;//用来推断是否载入完数组里面的数据
if(iNow<data.length/9)//推断是否载入完了json里面的数据
{
iNow++;
for(var i=0;i<imgs.length;i++)
{
(function(n){ //运行载入图片
var yImg=new Image();
yImg.src=imgs[n][0];
yImg.onload=function()
{
// var dd=document.createElement("li");
// dd.innerHTML="<img src=‘"+yImg.src+"‘/>";
var dd=‘<li><a href="‘+imgs[n][2]+‘" target="_blank"><img src="‘+yImg.src+‘"/></a><p><a href="‘+imgs[n][2]+‘" target="_blank">‘+imgs[n][1]+‘</a></p></li>‘;
$minUl = getMinUl();
$minUl.append(dd);
prepress++;
if(prepress>=imgs.length)
//控制是否已经运行完数组里面的内容了
{
$("#load").fadeOut();
}
};
})(i);
}
}
else
{
$("#load").fadeOut();
return false;
}
// console.log(iNow);
}
})
}
loadMeinv();
$(window).bind("scroll",function(){
var $minUl = getMinUl();
if($minUl.height() <= $(window).scrollTop()+$(window).height()){
//当最短的ul的高度比窗体滚出去的高度+浏览器高度大时载入新图片
$("#load").fadeIn();
// setTimeout(function(){
loadMeinv();
// $("#load").fadeOut();
// },2000);
}
});
function getMinUl(){//每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl =$arrUl.eq(0);
$arrUl.each(function(index,elem){
if($(elem).height()<$minUl.height()){
$minUl = $(elem);
}
});
return $minUl;
}
})
</script>
以上是关于瀑布流 ajax 预载入 json的主要内容，如果未能解决你的问题，请参考以下文章