教你如何区分jquery瀑布流js瀑布流

如何区别jquery瀑布流js瀑布流 呢？今天带给大家实战干货哦。

以下是html文件：

nbsp;html>                                                #wraper {                width: 1000px;                margin: 0 auto;            }                        #wraper ul li {                margin: 0 auto;                list-style: none;                width: 265px;                float: left;                /*height: 1000px;*/                /*background: gray;*/                margin-left: 10px;            }                        .dec {                display: block;                padding: 0 15px;            }                        .time span{                display: block;                margin-bottom: 5px;            }                        .time a:nth-child(2) {                float:left ;            }            .time a:nth-child(3) {                float:right ;            }            .time {                padding: 10px 15px;                /*text-align: center;*/            }                        .clearfix:after {                content: '';                display: block;                clear: both;            }                        .img_box {                border: 1px solid #ccc;                margin-bottom: 15px;            }                        .img_box img {                width: 263px            }                        
            

登录后复制                                    <!–

你们男神都爱的倪妮 就是个大写哒美好

2016/03/18 20:08 阅读全文

–>                                                                                     var li_len = $('#wraper ul li').length; var $li = $('#wraper ul li') var index = -1; // for(; index < 5; index++) { // var op = createp(index); // var i = getShort(); // $li.eq(i).append(op); // // } //滚动过程中（不包含滚动高度），wraper高度+wraper的top要始终大于窗口高度 $(window).scroll(function() { var hei = $('#wraper').height() + $('#wraper').offset().top – $(document).scrollTop(); console.log(hei) // console.log($(window).height()+"========="+$(document).scrollTop()+"—-"+$(window).scrollTop()) if(hei < $(window).height()) { num = index + 5 console.log(num + "============") show(num); } }) show(10); function show(num) { index++; var $p = createp(index); var i = getShort(); $li.eq(i).append($p); $($p).fadeIn(1000); // 错误1 $li.eq(i).appendChild($p); var $img = $p.getElementsByTagName('img')[0]; // 错误2 var $img = $p.find('img')[0]; console.log(typeof $img) $img.onload = function() { if(index < num) { show(num); } } } function getShort() { var a = 0; var $first_li_hei = $('#wraper ul li').eq(0).height(); for(var i = 0; i < li_len; i++) { var li_hei = $('#wraper ul li').eq(i).height(); if(li_hei < $first_li_hei) { a = i; $first_li_hei = li_hei; } } console.log(a + '——') return a; } getShort(); function createp(i) { var p_dom = document.createElement('p'); // console.log(p_dom) // console.log(typeof p_dom) p_dom.className = 'img_box'; // var p_img_dom = document.createElement('img'); var p_img_dom = new Image(); p_img_dom.src = imgData[i].src; var p_a_dom = document.createElement('a'); p_a_dom.className = 'dec'; p_dom.appendChild(p_img_dom); p_dom.appendChild(p_a_dom); // p_dom.className='img_box'; var child_p = document.createElement('p'); child_p.className = 'time clearfix'; p_dom.appendChild(child_p); var child_p_span = document.createElement('span'); var child_p_a = document.createElement('a'); var child_p_a1 = document.createElement('a'); child_p_span.innerHTML = imgData[i].dec; child_p_a.innerHTML = imgData[i].time; child_p_a1.innerHTML = '阅读全文'; child_p.appendChild(child_p_span); child_p.appendChild(child_p_a); child_p.appendChild(child_p_a1); // $('#wraper ul li').eq(i).append(p_dom); return p_dom; }

相关推荐：

基于Jquery的瀑布流

thinkPHP实现瀑布流的方法，thinkphp实现瀑布

以上就是教你如何区分jquery瀑布流js瀑布流的详细内容，更多请关注【创想鸟】其它相关文章！