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

来源：动视网责编：小采时间：2020-11-27 19:30:45

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

教你如何区分jquery瀑布流js瀑布流:如何区别jquery瀑布流js瀑布流呢？今天带给大家实战干货哦。以下是html文件：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author"

推荐度：

点击下载本文 文档为doc格式

导读教你如何区分jquery瀑布流js瀑布流:如何区别jquery瀑布流js瀑布流呢？今天带给大家实战干货哦。以下是html文件：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author"

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

以下是html文件：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="author" content="luoyu" />
 <title>瀑布流</title>
 <style type="text/css">
 #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
 }
 </style>
 </head>
 <body>
 <p id="wraper" class="clearfix">
 <ul>
 <li>
 <!--<p class="img_box">
 <img src="img/1.jpg" width='263' />
 <a href="" class="dec">你们男神都爱的倪妮 就是个大写哒美好</a>
 <p class="time clearfix">
 <a>2016/03/18 20:08</a>
 <a href="">阅读全文</a>
 </p>
 </p>-->
 </li>
 <li></li>
 <li></li>
 </ul>
 </p>
 </body>
 <script src="js/jquery.js"></script>
 <script src="js/data.js"></script>
 <script type="text/javascript">
 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;
 }
 </script>
</html>

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

推荐度：

点击下载本文 文档为doc格式

标签： js 瀑布 jQuery

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐