• 一个无限加载瀑布流jquery实现

    实现大概是下面的效果，写了比较详细的注释 

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
body{padding:0;margin:0;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
@-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;background:#fff;}
#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;}
</style>
<body>
        <div id="wrap">
    
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/1.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/2.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/3.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/4.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
    
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/5.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/6.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/7.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/8.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/9.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/10.jpg"></div>
                <div class="title"><a href="#">waterfall</a></div>
            </div>
        </div>
    
    </div>
    
    
    
    <script type="text/javascript" src="js/jquery.js">
        
    </script>
    <script type="text/javascript">
window.onload = function(){
    ('wrap','box');
    var data = [
                    {'src':'1.jpg','title':'waterfall'},
                    {'src':'2.jpg','title':'waterfall'},
                    {'src':'3.jpg','title':'waterfall'},
                    {'src':'4.jpg','title':'waterfall'},
                    {'src':'5.jpg','title':'waterfall'},
                    {'src':'6.jpg','title':'waterfall'},
                    {'src':'7.jpg','title':'waterfall'},
                    {'src':'8.jpg','title':'waterfall'},
                    {'src':'9.jpg','title':'waterfall'},
                    {'src':'10.jpg','title':'waterfall'}
                ];
    
    
    window.onscroll = function(){
        if(getCheck()){
            var wrap = document.getElementById('wrap');
            for(i in data){
                //create a new box
                var box = document.createElement('div');
                box.className = 'box';
                wrap.appendChild(box);
                //create info and append to box
                var info = document.createElement('div');
                info.className = 'info';
                box.appendChild(info);
                //create pic div and append to info
                var pic = document.createElement('div');
                pic.className = 'pic';
                info.appendChild(pic);
                //create img element and set it' source
                var img = document.createElement('img');
                img.src = 'images/'+data[i].src;
//                img.src = data[i].src;
                img.style.height = 'auto';
                pic.appendChild(img);
                //create title
                var title = document.createElement('div');
                title.className = 'title';
                info.appendChild(title);
                //create anchor
                var a = document.createElement('a');
                a.innerHTML = data[i].title;
                title.appendChild(a);
            }
            
            ('wrap','box');
        }
    }
}

function (wrap,box){
    //    1.get elements
    var wrap = document.getElementById(wrap);
    var boxs  = getClass(wrap,box);
    //    2.get width of info
    var boxW = boxs[2].offsetWidth;
    console.log(boxW)
    
    //get colunm number so we can know how many pics can place
    var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
    wrap.style.width = boxW*colsNum+'px';//set the total width
    //    3.create an array to
    var everyH = [];//create an array to store the height of box
    for (var i = 0; i < boxs.length; i++) {
        if(i<colsNum){//when the first row are not filled
            everyH[i] = boxs[i].offsetHeight;
        }else{
            var minH = Math.min.apply(null,everyH);//get the min width in array
            var minIndex = getIndex(minH,everyH); //get the index of min width box
            getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);//place the new box
            everyH[minIndex] += boxs[i].offsetHeight;//¸the height of minIndex box now aquired the new box
        }
    }
}
/**
* a method to get class
* warp        
*  className    
*/
function getClass(wrap,className){
    var obj = wrap.getElementsByTagName('*');
    var arr = [];
    for(var i=0;i<obj.length;i++){
        if(obj[i].className == className){
            arr.push(obj[i]);
        }
    }
    return arr;
}
/**
get the index of min height box
*/
function getIndex(minH,everyH){
    for(index in everyH){
        if (everyH[index] == minH ) return index;
    }
}
/**
* check if the scrolled over the last box
*/
function getCheck(){
    var documentH = document.documentElement.clientHeight;
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
    return documentH+scrollH>=getLastH() ?true:false;
    // the last pic should be a little bit longer so can work when first ten pic onload complete
}
/**
* get the height of last box
*/
function getLastH(){
    var wrap = document.getElementById('wrap');
    var boxs = getClass(wrap,'box');
    return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* method to place the new box
*   box     [obj] 
*   top     [Num] 
*   left     [Num] 
*   index [Num] 
*/
var getStartNum = 0;//
//set the style of new box
function getStyle(box,top,left,index){
    if (getStartNum>=index) return;
    $(box).css({
        'position':'absolute',
        'top':top,
        "left":left,
        "opacity":"0"
    });
    $(box).stop().animate({
        "opacity":"1"
    },999);
    getStartNum = index;//¸
}
</script>
</body>
</html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <style type="text/css">
    body{padding:0;margin:0;}
    img{border:none;}
    a{text-decoration:none;color:#444;}
    a:hover{color:#999;}
    #title{600px;margin:20px auto;text-align:center;}
    @-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{auto;height:auto;margin:0 auto;position:relative;}
    #wrap .box{280px;height:auto;padding:10px;border:none;float:left;}
    #wrap .box .info{280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
    #wrap .box .info .pic{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{260px;border-radius:3px;}
    #wrap .box .info .title{260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
    </style>
    <body>
    <div id="wrap">

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/1.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/2.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/3.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/4.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/5.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/6.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/7.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/8.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/9.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    <div class="box">
    <div class="info">
    <div class="pic"><img src="images/10.jpg"></div>
    <div class="title"><a href="#">waterfall</a></div>
    </div>
    </div>

    </div>



    <script type="text/javascript" src="js/jquery.js">

    </script>
    <script type="text/javascript">
    window.onload = function(){
    prepare('wrap','box');
    var data = [
    {'src':'1.jpg','title':'waterfall'},
    {'src':'2.jpg','title':'waterfall'},
    {'src':'3.jpg','title':'waterfall'},
    {'src':'4.jpg','title':'waterfall'},
    {'src':'5.jpg','title':'waterfall'},
    {'src':'6.jpg','title':'waterfall'},
    {'src':'7.jpg','title':'waterfall'},
    {'src':'8.jpg','title':'waterfall'},
    {'src':'9.jpg','title':'waterfall'},
    {'src':'10.jpg','title':'waterfall'}
    ];


    window.onscroll = function(){
    if(getCheck()){
    var wrap = document.getElementById('wrap');
    for(i in data){
    //create a new box
    var box = document.createElement('div');
    box.className = 'box';
    wrap.appendChild(box);
    //create info and append to box
    var info = document.createElement('div');
    info.className = 'info';
    box.appendChild(info);
    //create pic div and append to info
    var pic = document.createElement('div');
    pic.className = 'pic';
    info.appendChild(pic);
    //create img element and set it' source
    var img = document.createElement('img');
    img.src = 'images/'+data[i].src;
    // img.src = data[i].src;
    img.style.height = 'auto';
    pic.appendChild(img);
    //create title
    var title = document.createElement('div');
    title.className = 'title';
    info.appendChild(title);
    //create anchor
    var a = document.createElement('a');
    a.innerHTML = data[i].title;
    title.appendChild(a);
    }

    prepare('wrap','box');
    }
    }
    }

    function prepare(wrap,box){
    // 1.get elements
    var wrap = document.getElementById(wrap);
    var boxs = getClass(wrap,box);
    // 2.get width of info
    var boxW = boxs[2].offsetWidth;
    console.log(boxW)

    //get colunm number so we can know how many pics can place
    var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
    wrap.style.width = boxW*colsNum+'px';//set the total width
    // 3.create an array to
    var everyH = [];//create an array to store the height of box
    for (var i = 0; i < boxs.length; i++) {
    if(i<colsNum){//when the first row are not filled
    everyH[i] = boxs[i].offsetHeight;
    }else{
    var minH = Math.min.apply(null,everyH);//get the min width in array
    var minIndex = getIndex(minH,everyH); //get the index of min width box
    getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);//place the new box
    everyH[minIndex] += boxs[i].offsetHeight;//¸the height of minIndex box now aquired the new box
    }
    }
    }
    /**
    * a method to get class
    * warp [Obj] Íâ²ã
    * className [Str] ˈ̞
    */
    function getClass(wrap,className){
    var obj = wrap.getElementsByTagName('*');
    var arr = [];
    for(var i=0;i<obj.length;i++){
    if(obj[i].className == className){
    arr.push(obj[i]);
    }
    }
    return arr;
    }
    /**
    get the index of min height box
    */
    function getIndex(minH,everyH){
    for(index in everyH){
    if (everyH[index] == minH ) return index;
    }
    }
    /**
    * check if the scrolled over the last box
    */
    function getCheck(){
    var documentH = document.documentElement.clientHeight;
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
    return documentH+scrollH>=getLastH() ?true:false;
    // the last pic should be a little bit longer so can work when first ten pic onload complete
    }
    /**
    * get the height of last box
    */
    function getLastH(){
    var wrap = document.getElementById('wrap');
    var boxs = getClass(wrap,'box');
    return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
    }
    /**
    * method to place the new box
    * box [obj]
    * top [Num]
    * left [Num]
    * index [Num]
    */
    var getStartNum = 0;//
    //set the style of new box
    function getStyle(box,top,left,index){
    if (getStartNum>=index) return;
    $(box).css({
    'position':'absolute',
    'top':top,
    "left":left,
    "opacity":"0"
    });
    $(box).stop().animate({
    "opacity":"1"
    },999);
    getStartNum = index;//¸
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    Android UI性能优化详解
    Android开发中一些被冷落但却很有用的类和方法
    Android开发：Translucent System Bar 的最佳实践
    让动画不再僵硬：Facebook Rebound Android动画库介绍
    Android Touch事件传递机制
    转载爱哥自定义View系列－－Canvas详解
    Android最佳实践指南
    Android网络请求心路历程
    转载爱哥自定义View系列－－文字详解
    ORM是什么？
  • 原文地址：https://www.cnblogs.com/rlann/p/6259939.html
Copyright © 2020-2023  润新知