瀑布流 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="data: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.οnlοad=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>
转载于:https://www.cnblogs.com/yfceshi/p/6910306.html
瀑布流 ajax 预载入 json相关推荐
- 瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
- 原声JS瀑布流加延迟载入
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- 瀑布流第二种方式————基于ajax方式
第二种瀑布流是基于ajax方式工作的.与之前一种形式相比,这种方式可以向后台发送数据, 同时,ajax可以根据数据,每次只取一部分的数据,等滚轮划到底部时,再出发ajax,然后又去一次 models文 ...
- js结合jquery实现的ajax瀑布流加载实例
一.js代码 ajax函数 //瀑布流数据 var getData = function (i,url,name){$.post(url,{p:i},function(data){if(data.st ...
- 织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
- AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
- jq.ajax+php+mysql实现瀑布流缓冲加载数据
效果图如下: html+css代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
- 利用ajax实现织梦dedecms瀑布流无限加载功能
该功能主要用到AJAX技术! 一.首先找到并打开/plus/list.php文件,在里面找到如下代码: require_once(dirname(__FILE__)."/../include ...
最新文章
- RabbitMQ的消费限流
- java的dbhelper类_DBHelper.java(数据库连接类)
- 如何自动保存 Spring Boot 应用进程号?
- 正则表达式调用“或”变量
- 思科网络技术学院CCNA教程
- c# rar解压大小_C#利用WinRAR实现压缩和解压缩
- Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
- 好男人都结婚了吗?最后的研究结论亮了……
- 班志杰内蒙古大学计算机学院,内蒙古大学计算机学院研究生导师简介-班志杰(博士)...
- 用 as with ,和 ROW_NUMBER() 做分页查询
- python 与_Python基础 第一个 Python 程序
- linux数组fortran,Fortran77-90-95入门(十)--数组
- 如何成为一个优秀的计算机工程师,如何成为一个优秀的电气工程师
- linux磁盘文件检查修复工具下载,Linux磁盘坏道的检测及修复
- buildSrc使用,依赖统一管理
- python npv 计算公式_Python for NPV and IRR
- fluxion5.9 踩坑
- C语言_函数认知和函数三要素
- python 开发窗体应用程序_Python如何编写窗体程序
- js中对象的可枚举和不可枚举属性