JQ方式滝の流れ

2853 ワード



    
        
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .wraps{
                margin: 20px auto 0;
                width: 90%;
                border: 1px solid yellowgreen;
                overflow: hidden;
            }
            .wraps ul{
                float: left;
                width: 20%;
                margin: 10px 0;
                list-style: none;
            }
            .wraps ul li{
                font-size: 50px;
                text-align: center;             
                margin: 10px 0;
                
            }
        </style>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"/>
        <script type="text/javascript">
</code></pre> 
 <pre><code>        $(document).ready(function(){   
            
            function random(min,max){
                return parseInt(Math.random()*(max-min)+min);
            }
            var $wraps=$('.wraps')[0];
            var $uls=$('ul');                   
            function CreateLi(count){                   
                for( var i=0;i<count;i++){                  
                    var li=document.createElement('li');
                    li.innerText=i;
                    li.style.height=random(100,400)+'px';
                    li.style.background='rgba('+random(0,255)+','+random(0,255)+','+random(0,255)+','+Math.random()+')';
                    li.style.color='rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')';
                    
                    var minHeightUl=$uls[0];
                    for(var j=0;j<$uls.length;j++){
                        if(minHeightUl.offsetHeight>$uls[j].offsetHeight){
                            minHeightUl=$uls[j];
                        }
                    }                       
                    minHeightUl.appendChild(li);
                }
            }
            CreateLi(20);                           
            
            window.onscroll=function(){
            if((document.documentElement.scrollTop||document.body.scrollTop)>$wraps.offsetHeight-document.documentElement.clientHeight){
                    CreateLi(20);
                }
            } 
        })
    </script>


    <div class="wraps">
        <ul/>
        <ul/>
        <ul/>
        <ul/>
        <ul/>
        
    </div>

</code></pre> 
  
</article>
                            </div>
                        </div>