Shulou(Shulou.com)06/03 Report--

This article mainly introduces HTML5 how to achieve the effect of unlimited loading waterfall flow of pictures, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

The code is as follows:

JQuery Infinite load Waterfall flow / * tag redefinition * / body {padding:0;margin:0;background:#ddd url (/ jscss/demoimg/201312/bg55.jpg) repeat;} img {border:none;} a {text-decoration:none;color:#444;} a:hover {color:#999;} # title {width:600px;margin:20px auto;text-align:center;} / * define keyframes * / @-webkit-keyframes shade {from {opacity:1 } 15% {opacity:0.4;} to {opacity:1;}} @-moz-keyframes shade {from {opacity:1;} 15% {opacity:0.4;} to {opacity:1;}} @-ms-keyframes shade {from {opacity:1;} 15% {opacity:0.4;} to {opacity:1;} @-o-keyframes shade {from {opacity:1;} 15% {opacity:0.4;} to {opacity:1 } @ keyframes shade {from {opacity:1;} 15% {opacity:0.4;} to {opacity:1;}} / * wrap * / # wrap {width:auto;height:auto;margin:0 auto;position:relative;} # wrap .box {width:280px;height:auto;padding:10px;border:none;float:left;} # wrap .box .info {width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px # 666 } # wrap .box .info .pic {width:260px;height:auto;margin:0 auto;padding-top:10px;} # wrap .box .info .pic: hover {- webkit-animation:shade 3s ease-in-out 1;-moz-animation:shade 3s ease-in-out 1;-ms-animation:shade 3s ease-in-out 1;-o-animation:shade 3s ease-in-out 1; animation:shade 3s ease-in-out 1;} # wrap .box .info .pic img {width:260px Border-radius:3px;} # wrap .box .info .title {width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;} _ window.onload = function () {/ / run the waterfall flow main function PBL ('wrap','box') / / Simulation data var data = [{'src':'1.jpg','title':' picture title'}, {'src':'2.jpg','title':' picture title'}, {'src':'3.jpg','title':' picture title'}, {'src':'4.jpg','title':' picture title'}, {'src':'5.jpg','title':' picture title'} {'src':'6.jpg','title':' picture title'}, {'src':'7.jpg','title':' picture title'}] / / set scrolling load _ window.onscroll = function () {/ / verify data request if (getCheck ()) {var wrap = document.getElementById ('wrap'); for (i in data) {/ / create box var box = document.createElement (' div'); box.className = 'box'; wrap.appendChild (box); / / create info var info = document.createElement (' div'); info.className = 'info'; box.appendChild (info) / / create pic var pic = document.createElement ('div'); pic.className =' pic'; info.appendChild (pic); / / create img var img = document.createElement ('img'); img.src =' / jscss/demoimg/201312/'+ data [I] .src; img.style.height = 'auto'; pic.appendChild (img); / / create title var title = document.createElement (' div'); title.className = 'title'; info.appendChild (title) / / create a tag var a = document.createElement ('a'); a [XSS _ clean] = data [I] .title; title.appendChild (a);} PBL ('wrap','box');} / * * Waterfall flow main function * @ param wrap [Str] ID * @ param box [Str] the class name of each box * / function PBL (wrap,box) {/ / 1. Get the outer layer and each box var wrap = document.getElementById (wrap); var boxs = getClass (wrap,box); / / 2. Get the number of columns that can be displayed on the screen var boxW = boxs [0] .offsetWidth; var colsNum = Math.floor (document.documentElement.clientWidth/boxW); wrap.style.width = boxW*colsNum+'px';// for the outer assignment width / / 3. Loop out all the box and arrange var everyH = [] according to the waterfall flow; / / define an array to store the height for of each column (var I = 0; I

< boxs.length; i++) { if(i=index) return; $(box).css({ 'position':'absolute', 'top':top, "left":left, "opacity":"0" }); $(box).stop().animate({ "opacity":"1" },999); getStartNum = index;//更新请求数据的条数位置 } 瀑布流效果的学习By Smile.

Picture title

Picture title

Picture title

Picture title

Picture title

Picture title

Thank you for reading this article carefully. I hope the article "how to achieve the effect of unlimited waterfall flow with HTML5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.