javascript代码实例教程-瀑布流 ajax 预加载 json

发布时间:2019-01-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-瀑布流 ajax 预加载 json脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

pbl.json【模拟后台json数据】:

 

[
{
"id": "511895",
"tITle": "Smashicons: 300 Free Icons | GraphicBurger",
"referer": "https://graphicburger.COM/smashicons-300-free-icons/",
"url": "https://www.wookmark.com/image/511895/smashicons-300-free-icons-graphicburger",
"width": "600",
"height": "14328",
"image": "https://www.wookmark.com/images/original/511895_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511895_wookmark.jpg"
},
{
"id": "512237",
"title": "Inspirationde - Source of design & inspiration",
"referer": "https://www.inspirationde.com/image/38001/",
"url": "https://www.wookmark.com/image/512237/inspirationde-source-of-design-inspiration",
"width": "400",
"height": "575",
"image": "https://www.wookmark.com/images/original/512237_wookmark.jpg",
"PReview": "https://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": "https://www.wookmark.com/image/512412/bull-logo-design-by-simc",
"width": "800",
"height": "600",
"image": "https://www.wookmark.com/images/original/512412_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/512412_wookmark.png"
},
{
"id": "512550",
"title": "Female Portraits by Maxim Gurtovoy",
"referer": "https://portrait.photogrist.com/maxim-gurtovoy/",
"url": "https://www.wookmark.com/image/512550/female-portraits-by-maxim-gurtovoy",
"width": "1280",
"height": "854",
"image": "https://www.wookmark.com/images/original/512550_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512550_wookmark.jpg"
},
{
"id": "512116",
"title": "Card Wallet on Inspirationde",
"referer": "https://www.inspirationde.com/image/37992/",
"url": "https://www.wookmark.com/image/512116/card-wallet-on-inspirationde",
"width": "640",
"height": "1136",
"image": "https://www.wookmark.com/images/original/512116_wookmark.png",
"preview": "https://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": "https://www.wookmark.com/image/512301/pin-von-mike-hsu-auf-transportation-design-sketch-pinterest",
"width": "524",
"height": "960",
"image": "https://www.wookmark.com/images/original/512301_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512301_wookmark.jpg"
},
{
"id": "512705",
"title": "Inspirationde - Source of design & inspiration",
"referer": "https://www.inspirationde.com/image/38103/",
"url": "https://www.wookmark.com/image/512705/inspirationde-source-of-design-inspiration",
"width": "500",
"height": "750",
"image": "https://www.wookmark.com/images/original/512705_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512705_wookmark.jpg"
},
{
"id": "512735",
"title": ";multilayered Parallax on Inspirationde",
"referer": "https://www.inspirationde.com/image/38159/",
"url": "https://www.wookmark.com/image/512735/multilayered-parallax-on-inspirationde",
"width": "770",
"height": "2031",
"image": "https://www.wookmark.com/images/original/512735_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/512735_wookmark.png"
},
{
"id": "512770",
"title": "+",
"referer": "https://dmitrievdesign.blogspot.de/",
"url": "https://www.wookmark.com/image/512770",
"width": "1600",
"height": "1131",
"image": "https://www.wookmark.com/images/original/512770_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512770_wookmark.jpg"
},
{
"id": "512994",
"title": "Vifa Remote | Product Design | Pinterest",
"referer": "https://www.pinterest.com/pin/58476495138565211/",
"url": "https://www.wookmark.com/image/512994/vifa-remote-product-design-pinterest",
"width": "480",
"height": "521",
"image": "https://www.wookmark.com/images/original/512994_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512994_wookmark.jpg"
},
{
"id": "511896",
"title": "Inspirationde - Source of design & inspiration",
"referer": "https://www.inspirationde.com/image/37955/",
"url": "https://www.wookmark.com/image/511896/inspirationde-source-of-design-inspiration",
"width": "770",
"height": "1161",
"image": "https://www.wookmark.com/images/original/511896_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511896_wookmark.jpg"
},
{
"id": "511897",
"title": "physical sculpture of data on Inspirationde",
"referer": "https://www.inspirationde.com/image/17783/",
"url": "https://www.wookmark.com/image/511897/physical-sculpture-of-data-on-inspirationde",
"width": "480",
"height": "720",
"image": "https://www.wookmark.com/images/original/511897_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511897_wookmark.jpg"
},
{
"id": "511898",
"title": "subcreative_freelance_designer.jpg (1310×5856)",
"referer": "",
"url": "https://www.wookmark.com/image/511898/subcreative-freelance-designer-jpg-1310-5856",
"width": "1310",
"height": "5856",
"image": "https://www.wookmark.com/images/original/511898_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511898_wookmark.jpg"
},
{
"id": "512044",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "https://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "https://www.wookmark.com/image/512044/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "460",
"image": "https://www.wookmark.com/images/original/512044_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512044_wookmark.jpg"
},
{
"id": "512128",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "https://www.wookmark.com/image/512128",
"width": "500",
"height": "500",
"image": "https://www.wookmark.com/images/original/512128_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512128_wookmark.jpg"
},
{
"id": "512158",
"title": "Inspiration - define a room's focal point with bolder colours - Muuto",
"referer": "https://www.muuto.com/inspiration/Define_a_rooms_focal_point_with_bolder_colours/",
"url": "https://www.wookmark.com/image/512158/inspiration-define-a-room-s-focal-point-with-bolder-colours-muuto",
"width": "544",
"height": "707",
"image": "https://www.wookmark.com/images/original/512158_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512158_wookmark.jpg"
},
{
"id": "512239",
"title": "Inspirationde - Source of design & inspiration",
"referer": "https://www.inspirationde.com/image/37997/",
"url": "https://www.wookmark.com/image/512239/inspirationde-source-of-design-inspiration",
"width": "770",
"height": "481",
"image": "https://www.wookmark.com/images/original/512239_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512239_wookmark.jpg"
},
{
"id": "512251",
"title": "Digital Art Vision of Ecuador | Abduzeedo Design Inspiration",
"referer": "https://abduzeedo.com/digital-art-vision-ecuador",
"url": "https://www.wookmark.com/image/512251/digital-art-vision-of-ecuador-abduzeedo-design-inspiration",
"width": "900",
"height": "601",
"image": "https://www.wookmark.com/images/original/512251_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512251_wookmark.jpg"
},
{
"id": "512252",
"title": "Digital Art Vision of Ecuador | Abduzeedo Design Inspiration",
"referer": "https://abduzeedo.com/digital-art-vision-ecuador",
"url": "https://www.wookmark.com/image/512252/digital-art-vision-of-ecuador-abduzeedo-design-inspiration",
"width": "900",
"height": "900",
"image": "https://www.wookmark.com/images/original/512252_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/512304/pinterest-kreative-ideen-entdecken-und-speichern",
"width": "736",
"height": "886",
"image": "https://www.wookmark.com/images/original/512304_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512304_wookmark.jpg"
},
{
"id": "512350",
"title": "",
"referer": "https://www.simkom.com/sketchsite/image.php?id=143222523296659",
"url": "https://www.wookmark.com/image/512350",
"width": "800",
"height": "600",
"image": "https://www.wookmark.com/images/original/512350_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/512439/hong-kong-memoirs-by-fan-ho",
"width": "714",
"height": "997",
"image": "https://www.wookmark.com/images/original/512439_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512439_wookmark.jpg"
},
{
"id": "512639",
"title": "Daily Inspiration #2083 | Abduzeedo Design Inspiration",
"referer": "https://abduzeedo.com/daily-inspiration-2083",
"url": "https://www.wookmark.com/image/512639/daily-inspiration-2083-abduzeedo-design-inspiration",
"width": "770",
"height": "1695",
"image": "https://www.wookmark.com/images/original/512639_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512639_wookmark.jpg"
},
{
"id": "512641",
"title": "Apartment Building in Luxembourg / Metaform Architects on Inspirationde",
"referer": "https://www.inspirationde.com/image/38084/",
"url": "https://www.wookmark.com/image/512641/apartment-building-in-luxembourg-metaform-architects-on-inspirationde",
"width": "667",
"height": "1000",
"image": "https://www.wookmark.com/images/original/512641_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512641_wookmark.jpg"
},
{
"id": "512645",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "https://www.wookmark.com/image/512645",
"width": "540",
"height": "308",
"image": "https://www.wookmark.com/images/original/512645_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512645_wookmark.jpg"
},
{
"id": "512695",
"title": "brand New: New Logo and Identity for University of Warwick",
"referer": "https://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": "https://www.wookmark.com/image/512695/brand-new-new-logo-and-identity-for-university-of-warwick",
"width": "1000",
"height": "1190",
"image": "https://www.wookmark.com/images/original/512695_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512695_wookmark.jpg"
},
{
"id": "512754",
"title": "troublemaker",
"referer": "https://enfantdumiracle.tumblr.com/post/119753973458/misterk75-chloe-brase",
"url": "https://www.wookmark.com/image/512754/troublemaker",
"width": "500",
"height": "750",
"image": "https://www.wookmark.com/images/original/512754_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512754_wookmark.jpg"
},
{
"id": "512773",
"title": "Sketch, Tape, Sleep. Automotive sketch blog by Jack Luttig",
"referer": "https://jluttig.blogspot.de/",
"url": "https://www.wookmark.com/image/512773/sketch-tape-sleep-automotive-sketch-blog-by-jack-luttig",
"width": "1600",
"height": "723",
"image": "https://www.wookmark.com/images/original/512773_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/512775/snacks-in-amsterdam-adac-reisemagazin-on",
"width": "1200",
"height": "1616",
"image": "https://www.wookmark.com/images/original/512775_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512775_wookmark.jpg"
},
{
"id": "512856",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "https://www.wookmark.com/image/512856/99-tumblr",
"width": "353",
"height": "530",
"image": "https://www.wookmark.com/images/original/512856_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512856_wookmark.jpg"
},
{
"id": "512949",
"title": "Inspirationde - Source of design & inspiration",
"referer": "https://www.inspirationde.com/image/38184/",
"url": "https://www.wookmark.com/image/512949/inspirationde-source-of-design-inspiration",
"width": "500",
"height": "599",
"image": "https://www.wookmark.com/images/original/512949_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512949_wookmark.jpg"
},
{
"id": "513135",
"title": "Soul/part 2 by Marc Laroche on Inspirationde",
"referer": "https://www.inspirationde.com/image/38199/",
"url": "https://www.wookmark.com/image/513135/soul-part-2-by-marc-laroche-on-inspirationde",
"width": "770",
"height": "770",
"image": "https://www.wookmark.com/images/original/513135_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/513135_wookmark.jpg"
},
{
"id": "511822",
"title": "The J20 Project (Concept) on Inspirationde",
"referer": "https://www.inspirationde.com/image/37951/",
"url": "https://www.wookmark.com/image/511822/the-j20-project-concept-on-inspirationde",
"width": "640",
"height": "457",
"image": "https://www.wookmark.com/images/original/511822_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/511845/pinterest-descubra-e-guarde-ideias-criativas",
"width": "736",
"height": "1472",
"image": "https://www.wookmark.com/images/original/511845_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/511873/pinterest-descubra-e-guarde-ideias-criativas",
"width": "475",
"height": "478",
"image": "https://www.wookmark.com/images/original/511873_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511873_wookmark.jpg"
},
{
"id": "511899",
"title": "Handlettering Artwork For Walk Ministries on Inspirationde",
"referer": "https://www.inspirationde.com/image/37959/",
"url": "https://www.wookmark.com/image/511899/handlettering-artwork-for-walk-ministries-on-inspirationde",
"width": "770",
"height": "770",
"image": "https://www.wookmark.com/images/original/511899_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511899_wookmark.jpg"
},
{
"id": "511906",
"title": "Friend.Ship by NaBHaN on DeviantArt",
"referer": "https://nabhan.deviantart.com/art/Friend-Ship-487783671",
"url": "https://www.wookmark.com/image/511906/friend-ship-by-nabhan-on-deviantart",
"width": "650",
"height": "650",
"image": "https://www.wookmark.com/images/original/511906_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/511906_wookmark.png"
},
{
"id": "511907",
"title": "Cool by NaBHaN on DeviantArt",
"referer": "https://nabhan.deviantart.com/art/Cool-502329624",
"url": "https://www.wookmark.com/image/511907/cool-by-nabhan-on-deviantart",
"width": "650",
"height": "650",
"image": "https://www.wookmark.com/images/original/511907_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/511907_wookmark.png"
},
{
"id": "511920",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "https://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "https://www.wookmark.com/image/511920/mellow-electric-drive-skateboards-hiconsumption",
"width": "960",
"height": "640",
"image": "https://www.wookmark.com/images/original/511920_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511920_wookmark.jpg"
},
{
"id": "511921",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "https://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "https://www.wookmark.com/image/511921/mellow-electric-drive-skateboards-hiconsumption",
"width": "630",
"height": "420",
"image": "https://www.wookmark.com/images/original/511921_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/511921_wookmark.jpg"
},
{
"id": "511923",
"title": "Mellow Electric Drive Skateboards | HiConsumption",
"referer": "https://hiconsumption.com/2015/05/mellow-electric-drive-skateboards/",
"url": "https://www.wookmark.com/image/511923/mellow-electric-drive-skateboards-hiconsumption",
"width": "630",
"height": "420",
"image": "https://www.wookmark.com/images/original/511923_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/512001/screen-shot-2014-09-22-at-2-12-12-pm-png-1506-1518",
"width": "1506",
"height": "1518",
"image": "https://www.wookmark.com/images/original/512001_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/512001_wookmark.png"
},
{
"id": "512039",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "https://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "https://www.wookmark.com/image/512039/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "362",
"image": "https://www.wookmark.com/images/original/512039_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512039_wookmark.jpg"
},
{
"id": "512040",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "https://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "https://www.wookmark.com/image/512040/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "479",
"image": "https://www.wookmark.com/images/original/512040_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512040_wookmark.jpg"
},
{
"id": "512043",
"title": "mercedes-benz and lufthansa collaborate on refining the VIP aircraft cabin",
"referer": "https://www.designboom.com/design/mercedes-benz-lufthansa-cabin-concept-05-19-2015/",
"url": "https://www.wookmark.com/image/512043/mercedes-benz-and-lufthansa-collaborate-on-refining-the-vip-aircraft-cabin",
"width": "818",
"height": "460",
"image": "https://www.wookmark.com/images/original/512043_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512043_wookmark.jpg"
},
{
"id": "512047",
"title": "spalvierdelciotto designs a LED desk lamp for lexon",
"referer": "https://www.designboom.com/design/spalvierdelciotto-led-desk-lamp-05-18-2015/",
"url": "https://www.wookmark.com/image/512047/spalvierdelciotto-designs-a-led-desk-lamp-for-lexon",
"width": "818",
"height": "472",
"image": "https://www.wookmark.com/images/original/512047_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512047_wookmark.jpg"
},
{
"id": "512103",
"title": "Changes",
"referer": "https://overcalm.co.vu/post/119516785288",
"url": "https://www.wookmark.com/image/512103/changes",
"width": "548",
"height": "629",
"image": "https://www.wookmark.com/images/original/512103_wookmark.png",
"preview": "https://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": "https://www.wookmark.com/image/512182/unseen-cuba-by-marius-jovai-a",
"width": "1180",
"height": "785",
"image": "https://www.wookmark.com/images/original/512182_wookmark.jpg",
"preview": "https://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": "https://www.wookmark.com/image/512193/it-looks-better-in-black",
"width": "500",
"height": "750",
"image": "https://www.wookmark.com/images/original/512193_wookmark.png",
"preview": "https://www.wookmark.com/images/thumbs/512193_wookmark.png"
},
{
"id": "512225",
"title": "Matt's Mini-ITX - Album on imgur",
"referer": "https://imgur.com/a/e8lFa",
"url": "https://www.wookmark.com/image/512225/matt-s-mini-itx-album-on-imgur",
"width": "3264",
"height": "2448",
"image": "https://www.wookmark.com/images/original/512225_wookmark.jpg",
"preview": "https://www.wookmark.com/images/thumbs/512225_wookmark.jpg"
}
]

 

htML文件【这里使用jquery】:

 












        javascript代码实例教程-瀑布流 ajax 预加载 json




        <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 {
        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 {
        iNow++;
        for(var i=0;i {
        (function(n){ //执行加载图片
        var yImg=new Image();
        yImg.src=imgs[n][0];
        yImg.onload=function()
        {
        // var dd=document.createElement("li");
        // dd.innerHTML="瀑布流 ajax 预加载 json";
        var dd='
      • 瀑布流 ajax 预加载 json

        '+imgs[n][1]+'

      • ';
        $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>

         

        觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

        脚本宝典总结

        以上是脚本宝典为你收集整理的javascript代码实例教程-瀑布流 ajax 预加载 json全部内容,希望文章能够帮你解决javascript代码实例教程-瀑布流 ajax 预加载 json所遇到的问题。

        如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

        本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
        如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。