mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

jquery瀑布布局,jquery完成轻巧瀑布流布局

时间:2019-08-23 22:15来源:www.mg4377.com
jquery实现简单的瀑布流布局,jquery瀑布布局 是初步都会说的规律 瀑布流布局有三种,一种是固定列,一种是非固定列。在此首要记述第一种的完毕。 平昔列的风味是:无论页面怎么缩

jquery实现简单的瀑布流布局,jquery瀑布布局

是初步都会说的规律

瀑布流布局有三种,一种是固定列,一种是非固定列。在此首要记述第一种的完毕。

平昔列的风味是:无论页面怎么缩放,每行的总列数都平等。

一行4列的瀑布流从布局的角度来讲,就是4个li标签。通过自然的轩然大波(比如滚动条滚动多少px),然后读取之,再把数量动态地抬高到页面中。

累加数量标准,不是基于li索引值来加,而是基于各列中中度最短的的那列动态增进。不然或许引致页面很羞耻(左右莫斯中国科学技术大学学不联合)。

实例涉及ajax方法。可在服务器景况下运作。

废话相当的少说了。直接上样式。

 <ul id="ul1">
  <li>
   <div>
    <img src="images/1.jpg">
    <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
   </div>
  </li>
  <li>
   <div>
    <img src="images/2.jpg">
    <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
   </div>
  </li>
  <li>
   <div>
    <img src="images/3.jpg">
    <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
   </div>
  </li>
  <li>
   <div>
    <img src="images/4.jpg">
    <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
   </div>
  </li>
 </ul>

css

*{
 margin:0;
 padding: 0;
}
ul li{
 list-style: none;
}
#ul1{
 width: 1080px;
 margin: 100px auto 0;
}
li{
 width: 247px;
 float: left;
 margin-right: 10px;
}
li div{
 border:1px solid #000;padding:10px;
 margin-bottom:10px;
}
li div img{
 width: 225px;display: block;
}

中央职能如图:

图片 1

体制显示没难题现在,就把li里面包车型大巴代码删掉。

接下去通过ajax来动态增加。

多少哪里来?

此间用的是wookmark的数额接口。

点开url获得是叁个json。

音信量非常的大。怎么深入分析?

诚如可以看文档。然则手头未有文书档案的气象下,可以看看链接。再次回到是怎么鬼。

function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}
$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
 })
})

调节台打字与印刷结果为:

图片 2

原先是一个四17个图片音信整合的数组。各种数组元素都以二个json。在那个差相当少的demo里面,暂且只须求取preview属性和title属性就好了。

布局落成

重在之一在于,推断最短的li,事实上大家须要最短中度li的索引值。

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i  ){
  if($('li').eq(i).height()<$('li').eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}

下一场正是getJSON方法

$(function(){
 $.getJSON(createUrl(1),function(data){
  //console.log(data);
  for(var i=0;i<dataArr.length;i  ){
   var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
   //console.log($('li').eq(getShortestLi()).height())
   $('li').eq(getShortestLi()).append($html);
  };
  console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
 })
})

再加载看看,布局就出去了。简单又雅观。

图片 3

姣好这里,看起来整个都相当好。但是潜伏着三个沉重的标题。

for循环惹的祸?

拜会console.log的音信。为了剖析,笔者把4个li的高度放进了二个数组:

图片 4

50张图纸分4列,少说平均中度也得有三四千像素。

而到循环截止,程序决断的极端竟然独有令人切齿的一千多个px,因为图片加载进度慢于for循环推行进程。即使demo里的显得还算符合规律,但这种代码在网速糟糕时,会促成工作事故。

jquery瀑布布局,jquery完成轻巧瀑布流布局。思路一:能够断定图片是或不是加载成功。

能够用个停车计时器监听下,然后用递归达成,笔者的方案是这么

     var index=0;
     function LoadPic(index){
      var $html=$('<div><img src="' data[index].preview '"><p>' data[index].title '</p></div>')
      $('li').eq(getShortestLi()).append($html);
      var oImg=$html.find('img');
      var t=setInterval(function(){
       if(oImg.height()!=0){//如果加载完了。
        clearInterval(t);
        //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
        if(index<50){
         return LoadPic(index 1);
        }else{
         return false;
        } 
       }else{
        console.log('wait')
       }
      },50)//每隔50ms监听一次
     }
     LoadPic(0);

可是,从客户体验的角度来讲,等一张图加载成功再进行下一张加载是不友好的。数据提供方都应该平素把图片的冲天在服务器管理好,json数据之中重返过来。网速不快的时候,要等短期,然后一下子图形都出去了,不认为很奇特吗?非常是第三方接口。中兴载不出来就出大主题材料了。

所幸的是,第三方提供了图片的宽高新闻。

故此for循环照旧得以部分,在回到的多寡里面,有宽度和高度值。利用它们就足以兑现定宽(255px)和定高(原始中度乘上叁个百分比)。

$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
  for(var i=0;i<data.length;i  ){
    //console.log(data[i].preview);
    var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>')
    $('li').eq(getShortestLi()).append($html);

    $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
    $html.find('img').css('width','225px'); 
   };
  //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
 })
})

实则个人以为那是最简便且顾客体验最佳的方案。

有了瀑布,还亟需流

流的逻辑

往下拉(滚动),第三个底部步入可视区的li,优先加载。

图片 5

换句话说,最短li的冲天与该li到页面顶上部分之和小于滚动条中度和可视区高度之和时,触发li加载。

li的可观好求。可是最短li到页面顶上部分距离怎么求?

原生的措施能够这么达成:

function getTop(obj){
 var iTop=0;
 while(obj){
  iTop =obj.offsetTop;
  obj=obj.offsetParent;
 }//累加元素本身和自身所有父级高度偏移值
 return iTop;
}

然则本案例既然是用jquery,自然有它的格局。

obj.offset().top

滚动事件

原生的落到实处情势是:window.onscroll=function(){...}

jquery的兑现形式是:$(window).scroll(function(){...})

今昔认证一下写出的代码代码有没难点

 (window).scroll(function(){
  var $li=$('li').eq(getShortestLi());
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
  //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
  if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
    alert(1);
  }
 })

运行代码,开采第贰个毕竟的li出现是可视区时,弹出1.表明可用。

因为关乎到滚动事件,所以getJSON相关函数应该封装为getList()方便调用。所以必要再一次调治一下。

那时的代码是那样的:

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i  ){
  if($('li').eq(i).height()<$('li').eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}
function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}
function getList(n){
 $.getJSON(createUrl(n),function(data){
  //console.log(data);
  for(var i=0;i<data.length;i  ){
   var $html=var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
   //console.log(data[i].height);
   $('li').eq(getShortestLi()).append($html);
   dataArr[i].height*=225/dataArr[i].width;
   $html.find('img').css('height',dataArr[i].height 'px');
   $html.find('img').css('width','225px');
  };  
}
$(function(){
 var pageNum=1;
 getList(pageNum);
 $(window).scroll(function(){
  var $li=$('li').eq(getShortestLi();
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
   pageNum  ;
   console.log(pageNum);
   getList(pageNum);
  }
 })
})

那样一来,好像能够兑现了。可是一看调控台的console.log,又发掘标题。

如厕的逻辑

在接触加载前提时,图片正在加载,时期动了滚动条,就又触及第三次加载,再动一下,就接触第二次,于是短短一瞬间,触发了n次加载。

那就做一个开关吧。

就跟公共厕所逻辑一样。n个人排队进三个坑位。外面包车型客车人想要进去首先得推断门是还是不是锁上了。没锁才干进。进去之后第一件事把门锁上。等如厕完结,门就开采。后边的人才具进

新装置七个按钮bCheck,默感觉true。

到触发加载条件时,还要判定bCheck是还是不是为真(门开),为真时技艺触发getList()(如厕)。不然return false(只好等)。

getList一最初就把bCheck设为false(如厕前先锁门)。等到getList回调函数实践到尾声。再把bCheck设为true(开门)。

这一段不贴代码了。

总有流完的一天。

当数码结束时(全数人上完厕所),就从不须要再开展加载了(自动把门锁上)。

由此在getJSON回调函数内锁门之后察觉步向的是个空数组,那就张开决断,当获得到data的length为空时,直接returnfalse。那么bCheck就永恒关上了。

整套代码如下:

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i  ){
  if($('li').eq(i).height()<$('li').eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}
function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}
var bCheck=false;
function getList(n){
 $.getJSON(createUrl(n),function(data){
  if(data.length==0){
   return false;
  }else{
   for(var i=0;i<data.length;i  ){   
    //console.log(data[i].preview);
    var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
    $('li').eq(getShortestLi()).append($html);

    $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
    $html.find('img').css('width','225px'); 
   };
  }
  bCheck=true; 
 });
}
$(function(){
 var pageNum=1;
 getList(pageNum);
 $(window).scroll(function(){
  var $li=$('li').eq(getShortestLi());
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
  //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
  if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
   if(bCheck){
    bCheck=false;
    pageNum  ;
    //console.log(pageNum);
    getList(pageNum); 
   }else{
    return false;
   } 
  }
 })
})

以上就是本文的全部内容,希望本文的故事情节对咱们的学习也许干活能推动一定的提携,同临时间也希望多多协理帮客之家!

是始于都会说的原理 瀑布流布局有二种,一种是固定列,一种是非固定列。在此首要记述第一...

jquery实现简单瀑布流布局

jquery落成轻易瀑布流布局

是初始都会说的准则

是开端都会说的规律

瀑布流布局有三种,一种是固定列,一种是非固定列。在此关键记述第一种的落到实处。
定点列的天性是:无论页面怎么缩放,每行的总列数都无差异。
一行4列的瀑布流从布局的角度来讲,正是4个li标签。通过自然的平地风波(例如滚动条滚动多少px),然后读取之,再把数量动态地加上到页面中。
丰盛数据规范,不是根据li索引值来加,而是遵照各列中中度最短的的那列动态增进。否则也许形成页面很掉价(左右冲天不联合)。
实例涉及ajax方法。可在服务器景况下运作。

废话没有多少说了。直接上样式。

    <ul id="ul1">
        <li>
            <div>
                <img src="images/1.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/2.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/3.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/4.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
    </ul>

css

*{
    margin:0;
    padding: 0;
}

ul li{
    list-style: none;
}

#ul1{
    width: 1080px;
    margin: 100px auto 0;
}

li{
    width: 247px;
    float: left;
    margin-right: 10px;
}
li div{
    border:1px solid #000;padding:10px;
    margin-bottom:10px;
}
li div img{
    width: 225px;display: block;
}

着力功效如图:
图片 6
体制突显没难点今后,就把li里面包车型大巴代码删掉。
接下去通过ajax来动态拉长。

是开首都会说的法规

瀑布流布局有三种,一种是固定列,一种是非固定列。在此关键记述第一种的达成。
定位列的特点是:无论页面怎么缩放,每行的总列数都一样。
一行4列的瀑布流从布局的角度来讲,便是4个li标签。通过一定的风浪(举个例子滚动条滚动多少px),然后读取之,再把数据动态地抬高到页面中。
丰硕数量规范,不是依附li索引值来加,而是基于各列中中度最短的的那列动态增加。否则或许导致页面很掉价(左右中度不统一)。
实例涉及ajax方法。可在服务器意况下运作。

废话十分少说了。间接上样式。

    <ul id="ul1">
        <li>
            <div>
                <img src="images/1.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/2.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/3.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
        <li>
            <div>
                <img src="images/4.jpg">
                <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
            </div>
        </li>
    </ul>

css

*{
    margin:0;
    padding: 0;
}

ul li{
    list-style: none;
}

#ul1{
    width: 1080px;
    margin: 100px auto 0;
}

li{
    width: 247px;
    float: left;
    margin-right: 10px;
}
li div{
    border:1px solid #000;padding:10px;
    margin-bottom:10px;
}
li div img{
    width: 225px;display: block;
}

骨干职能如图:
图片 7
体制展现没难题现在,就把li里面包车型客车代码删掉。
接下去通过ajax来动态增进。

瀑布流布局有三种,一种是固定列,一种是非固定列。在此关键记述第一种的兑现。

数据哪儿来?

此地用的是wookmark的多寡接口。

点开url得到是一个json。
音信量非常大。怎么分析?
貌似能够看文书档案。可是手头尚无文书档案的状态下,能够看看链接。再次回到是怎么着鬼。

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}

$(function(){
    $.getJSON(createUrl(1),function(data){
        console.log(data);
    })
})

调整台打字与印刷结果为:
图片 8
本来是贰个伍拾三个图片消息整合的数组。每种数组成分都以三个json。在这么些轻松的demo里面,一时半刻只必要取preview属性和title属性就好了。

数码何地来?

此处用的是wookmark的多寡接口。

点开url获得是三个json。
音信量相当的大。怎么剖析?
一般可以看文书档案。可是手头尚无文书档案的图景下,能够看看链接。再次回到是怎么着鬼。

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}

$(function(){
    $.getJSON(createUrl(1),function(data){
        console.log(data);
    })
})

调控台打字与印刷结果为:
图片 9
原来是八个四十五个图片新闻整合的数组。每一种数组成分都是二个json。在这一个简单的demo里面,权且只供给取preview属性和title属性就好了。

固定列的表征是:无论页面怎么缩放,每行的总列数都同样。

布局达成

第一之一在于,推断最短的li,事实上大家供给最短中度li的索引值。

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

下一场正是getJSON方法

$(function(){
    $.getJSON(createUrl(1),function(data){
        //console.log(data);

        for(var i=0;i<dataArr.length;i  ){
            var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
            //console.log($('li').eq(getShortestLi()).height())
            $('li').eq(getShortestLi()).append($html);
        };
       console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
    })
})

再加载看看,布局就出去了。轻便又美貌。
图片 10

做到这里,看起来整个都非常好。然则潜伏着三个致命的标题。

布局达成

要害之一在于,剖断最短的li,事实上我们须求最短中度li的索引值。

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

下一场正是getJSON方法

$(function(){
    $.getJSON(createUrl(1),function(data){
        //console.log(data);

        for(var i=0;i<dataArr.length;i  ){
            var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
            //console.log($('li').eq(getShortestLi()).height())
            $('li').eq(getShortestLi()).append($html);
        };
       console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
    })
})

再加载看看,布局就出来了。轻松又美观。
图片 11

姣好这里,看起来整个都蛮好。然则潜伏着多个沉重的标题。

一行4列的瀑布流从布局的角度来讲,就是4个li标签。通过自然的事件(比方滚动条滚动多少px),然后读取之,再把数据动态地加上到页面中。

for循环惹的祸?

看看console.log的消息。为了剖析,我把4个li的惊人放进了一个数组:
图片 12
50张图纸分4列,少说平均中度也得有三陆仟像素。
而到循环停止,程序判别的终点竟然唯有令人切齿的1000多少个px,因为图片加载进程慢于for循环实施进程。尽管demo里的显示还算平常,但这种代码在网速倒霉时,会导致工作事故。

思路一:能够看清图片是还是不是加载成功。
可以用个机械漏刻监听下,然后用递归完成,作者的方案是那般

                    var index=0;
                    function LoadPic(index){
                        var $html=$('<div><img src="' data[index].preview '"><p>' data[index].title '</p></div>')
                        $('li').eq(getShortestLi()).append($html);


                        var oImg=$html.find('img');
                        var t=setInterval(function(){

                            if(oImg.height()!=0){//如果加载完了。
                                clearInterval(t);
                                //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
                                if(index<50){
                                    return LoadPic(index 1);
                                }else{
                                    return false;
                                } 
                            }else{
                                console.log('wait')
                            }

                        },50)//每隔50ms监听一次

                    }

                    LoadPic(0);

可是,从客户体验的角度来讲,等一张图加载成功再张开下一张加载是不本人的。数据提供方都应该一直把图纸的中度在服务器管理好,json数据里面再次回到过来。网速不快的时候,要等长时间,然后一下子图纸都出来了,不感到很奇异吗?特别是第三方接口。BlackBerry载不出来就出大题目了。

所幸的是,第三方提供了图片的宽高消息。
就此for循环依然得以部分,在回来的数据之中,有增长幅度和中度值。利用它们就能够完毕定宽(255px)和定高(原始高度乘上多少个比重)。

$(function(){
    $.getJSON(createUrl(1),function(data){

        console.log(data);


        for(var i=0;i<data.length;i  ){

                //console.log(data[i].preview);
                var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>')
                $('li').eq(getShortestLi()).append($html);

                $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
                $html.find('img').css('width','225px'); 
         };

        //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
    })
})

实在个人认为那是最轻便易行且客户体验最佳的方案。

for循环惹的祸?

拜谒console.log的音讯。为了深入分析,我把4个li的莫斯中国科学技术大学学放进了两个数组:
图片 13
50张图片分4列,少说平平均高度度也得有三4000像素。
而到循环甘休,程序判定的顶峰竟然独有令人切齿的一千多少个px,因为图片加载进度慢于for循环施行进程。就算demo里的体现还算不奇怪,但这种代码在网速倒霉时,会招致职业事故。

思路一:能够判断图片是或不是加载成功。
能够用个放大计时器监听下,然后用递归实现,笔者的方案是那样

                    var index=0;
                    function LoadPic(index){
                        var $html=$('<div><img src="' data[index].preview '"><p>' data[index].title '</p></div>')
                        $('li').eq(getShortestLi()).append($html);


                        var oImg=$html.find('img');
                        var t=setInterval(function(){

                            if(oImg.height()!=0){//如果加载完了。
                                clearInterval(t);
                                //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
                                if(index<50){
                                    return LoadPic(index 1);
                                }else{
                                    return false;
                                } 
                            }else{
                                console.log('wait')
                            }

                        },50)//每隔50ms监听一次

                    }

                    LoadPic(0);

只是,从客商体验的角度来讲,等一张图加载成功再扩充下一张加载是不友善的。数据提供方都应该间接把图纸的万丈在服务器管理好,json数据之中重回过来。网速异常的慢的时候,要等长时间,然后一下子图片都出去了,不以为很魔幻吗?尤其是第三方接口。Moto松井玲奈载不出去就出大主题材料了。

所幸的是,第三方提供了图片的宽高音信。
之所以for循环依然得以部分,在回去的数额里面,有小幅和中度值。利用它们就足以兑现定宽(255px)和定高(原始中度乘上二个百分比)。

$(function(){
    $.getJSON(createUrl(1),function(data){

        console.log(data);


        for(var i=0;i<data.length;i  ){

                //console.log(data[i].preview);
                var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>')
                $('li').eq(getShortestLi()).append($html);

                $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
                $html.find('img').css('width','225px'); 
         };

        //console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
    })
})

事实上个人感觉这是最简易且客户体验最佳的方案。

累加数量规范,不是依据li索引值来加,而是基于各列中中度最短的的那列动态拉长。不然恐怕导致页面很羞耻(左右莫斯科大学不统一)。

有了瀑布,还索要流

有了瀑布,还须求流

实例涉及ajax方法。可在服务器情况下运作。

流的逻辑

往下拉(滚动),第多个底部步向可视区的li,优先加载。
图片 14
换句话说,最短li的高度与该li到页面顶部之和小于滚动条高度和可视区高度之和时,触发li加载。

流的逻辑

往下拉(滚动),第贰个底部步入可视区的li,优先加载。
图片 15
换句话说,最短li的高度与该li到页面顶部之和小于滚动条高度和可视区高度之和时,触发li加载。

废话很少说了。直接上样式。

li的惊人好求。可是最短li到页面最上端距离怎么求?

原生的章程能够那样达成:

function getTop(obj){
    var iTop=0;
    while(obj){
        iTop =obj.offsetTop;
        obj=obj.offsetParent;
    }//累加元素本身和自身所有父级高度偏移值
    return iTop;
}

唯独本案例既然是用jquery,自然有它的格局。

obj.offset().top

li的万丈好求。可是最短li到页面顶端距离怎么求?

原生的主意能够如此达成:

function getTop(obj){
    var iTop=0;
    while(obj){
        iTop =obj.offsetTop;
        obj=obj.offsetParent;
    }//累加元素本身和自身所有父级高度偏移值
    return iTop;
}

而是本案例既然是用jquery,自然有它的措施。

obj.offset().top
 <ul id="ul1">
 <li>
  <div>
  <img src="images/1.jpg">
  <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
  <img src="images/2.jpg">
  <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
  <img src="images/3.jpg">
  <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
  <img src="images/4.jpg">
  <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 </ul>

滚动事件

原生的落真实情形势是:window.onscroll=function(){...}
jquery的兑现情势是:$(window).scroll(function(){...})

目前认证一下写出的代码代码有没难题

    (window).scroll(function(){

        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
                alert(1);
        }
    })

运营代码,发掘第3个终究的li出现是可视区时,弹出1.认证可用。

因为涉及到滚动事件,所以getJSON相关函数应该封装为getList()方便调用。所以要求再行调度一下。
那时候的代码是那般的:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}

function getList(n){
    $.getJSON(createUrl(n),function(data){
        //console.log(data);

        for(var i=0;i<data.length;i  ){
            var $html=var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
            //console.log(data[i].height);
            $('li').eq(getShortestLi()).append($html);
            dataArr[i].height*=225/dataArr[i].width;
            $html.find('img').css('height',dataArr[i].height 'px');
            $html.find('img').css('width','225px');
        };     
}


$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){
        var $li=$('li').eq(getShortestLi();
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
            pageNum  ;
            console.log(pageNum);
            getList(pageNum);
        }
    })
})

那样一来,好像能够达成了。不过一看调控台的console.log,又发掘难点。

滚动事件

原生的落到实处方式是:window.onscroll=function(){...}
jquery的兑现方式是:$(window).scroll(function(){...})

现行反革命说飞鹤(Beingmate)下写出的代码代码有没难点

    (window).scroll(function(){

        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
                alert(1);
        }
    })

运转代码,开采第贰个究竟的li出现是可视区时,弹出1.验证可用。

因为涉嫌到滚动事件,所以getJSON相关函数应该封装为getList()方便调用。所以需求重新调节一下。
那时候的代码是那般的:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}

function getList(n){
    $.getJSON(createUrl(n),function(data){
        //console.log(data);

        for(var i=0;i<data.length;i  ){
            var $html=var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
            //console.log(data[i].height);
            $('li').eq(getShortestLi()).append($html);
            dataArr[i].height*=225/dataArr[i].width;
            $html.find('img').css('height',dataArr[i].height 'px');
            $html.find('img').css('width','225px');
        };     
}


$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){
        var $li=$('li').eq(getShortestLi();
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
            pageNum  ;
            console.log(pageNum);
            getList(pageNum);
        }
    })
})

那样一来,好像能够完毕了。但是一看调整台的console.log,又挖掘难题。

css

如厕的逻辑

在触及加载前提时,图片正在加载,时期动了滚动条,就又触及第一遍加载,再动一下,就接触第一遍,于是短短一须臾间,触发了n次加载。
那就做二个按钮吧。
就跟公共厕所逻辑一样。n个人排队进贰个坑位。外面包车型客车人想要进去首先得剖断门是不是锁上了。没锁手艺进。进去以往第一件事把门锁上。等如厕实现,门就展开。前面包车型地铁人技术进
新安装五个开关bCheck,默以为true。
到触发加载条件时,还要判断bCheck是或不是为真(门开),为真时才具接触getList()(如厕)。否则return false(只能等)。
getList一从头就把bCheck设为false(如厕前先锁门)。等到getList回调函数推行到尾声。再把bCheck设为true(开门)。

这一段不贴代码了。

如厕的逻辑

在触及加载前提时,图片正在加载,时期动了滚动条,就又触及第一遍加载,再动一下,就接触第二回,于是短短一瞬间,触发了n次加载。
那就做四个开关吧。
就跟公共厕所逻辑同样。n个人排队进叁个坑位。外面包车型地铁人想要进去首先得决断门是不是锁上了。没锁才具进。进去之后第一件事把门锁上。等如厕达成,门就开荒。前面的人技能进
新装置贰个按键bCheck,默感觉true。
到触发加载条件时,还要判断bCheck是不是为真(门开),为真时工夫接触getList()(如厕)。否则return false(只能等)。
getList一从头就把bCheck设为false(如厕前先锁门)。等到getList回调函数施行到尾声。再把bCheck设为true(开门)。

这一段不贴代码了。

*{
 margin:0;
 padding: 0;
}
ul li{
 list-style: none;
}
#ul1{
 width: 1080px;
 margin: 100px auto 0;
}
li{
 width: 247px;
 float: left;
 margin-right: 10px;
}
li div{
 border:1px solid #000;padding:10px;
 margin-bottom:10px;
}
li div img{
 width: 225px;display: block;
}

总有流完的一天。

当数码甘休时(全部人上完厕所),就向来不须求再扩充加载了(自动把门锁上)。
就此在getJSON回调函数内锁门之后察觉步入的是个空数组,那就进展剖断,当获得到data的length为空时,直接returnfalse。那么bCheck就永久关上了。

整个代码如下:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}


function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}


var bCheck=false;
function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i  ){           
                //console.log(data[i].preview);
                var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
                $('li').eq(getShortestLi()).append($html);

                $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
                $html.find('img').css('width','225px'); 
            };
        }

        bCheck=true;    
    });
}

$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){

        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
            if(bCheck){
                bCheck=false;
                pageNum  ;
                //console.log(pageNum);
                getList(pageNum); 
            }else{
                return false;
            }

        }
    })
})

末段欣赏了下图片,不得不感叹,歪果仁真会玩~

总有流完的一天。

当数码甘休时(全体人上完厕所),就一向不须求再张开加载了(自动把门锁上)。
于是在getJSON回调函数内锁门之后察觉进入的是个空数组,那就张开剖断,当获得到data的length为空时,直接returnfalse。那么bCheck就恒久关上了。

全数代码如下:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i  ){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}


function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page=' num '&callback=?';
}


var bCheck=false;
function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i  ){           
                //console.log(data[i].preview);
                var $html=$('<div><img src="' data[i].preview '"><p>' data[i].title '</p></div>');
                $('li').eq(getShortestLi()).append($html);

                $html.find('img').css('height',(data[i].height*225/data[i].width) 'px');
                $html.find('img').css('width','225px'); 
            };
        }

        bCheck=true;    
    });
}

$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){

        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top $li.height(),document.documentElement.clientHeight scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度 滚动距离
        if($li.offset().top $li.height()<document.documentElement.clientHeight scrollTop){
            if(bCheck){
                bCheck=false;
                pageNum  ;
                //console.log(pageNum);
                getList(pageNum); 
            }else{
                return false;
            }

        }
    })
})

最终欣赏了下图片,不得不感慨,歪果仁真会玩~

着力效能如图:

图片 16

体制突显没难题未来,就把li里面包车型客车代码删掉。

接下去通过ajax来动态拉长。

数据哪个地方来?

此间用的是wookmark的数目接口。

点开url获得是一个json。

音信量异常的大。怎么深入分析?

相似能够看文书档案。不过手头尚无文书档案的场所下,可以看看链接。再次来到是如何鬼。

编辑:www.mg4377.com 本文来源:jquery瀑布布局,jquery完成轻巧瀑布流布局

关键词: 知识储备