瀑布流 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.ο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>