瀑布流佈局影片資料分享-js教程-PHP中文網

瀑布流佈局影片資料分享

巴扎黑

發布： 2017-08-30 11:33:57

原創

1763 人瀏覽過

瀑布流，又稱為瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷加載資料塊並附加至當前尾部。最早採用此佈局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本上為這類風格。

瀑布流佈局是網站比較流行的一種佈局方式。本案例將深入講解實現瀑布流佈局的三大方式：JavaScript、jQurey和CSS3，你將學習到如何用JavaScript方法實現圖片的定位及排序、兩種不同的方式對圖片進行持續加載，以及CSS3中多欄佈局怎麼實現瀑布流佈局。

瀑布流佈局影片資料分享

影片播放位址：http://www.php.cn/course/301.html

學習困難：

$( window ).on( "load", function(){
 waterfall(&#39;main&#39;,&#39;box&#39;);
 //模拟数据json
 var dataJson = {&#39;data&#39;: [{&#39;src&#39;:&#39;30.jpg&#39;},{&#39;src&#39;:&#39;31.jpg&#39;},{&#39;src&#39;:&#39;32.jpg&#39;},{&#39;src&#39;:&#39;33.jpg&#39;},{&#39;src&#39;:&#39;34.jpg&#39;},{&#39;src&#39;:&#39;35.jpg&#39;},{&#39;src&#39;:&#39;36.jpg&#39;},{&#39;src&#39;:&#39;37.jpg&#39;},{&#39;src&#39;:&#39;38.jpg&#39;},{&#39;src&#39;:&#39;39.jpg&#39;},{&#39;src&#39;:&#39;40.jpg&#39;},{&#39;src&#39;:&#39;41.jpg&#39;},{&#39;src&#39;:&#39;42.jpg&#39;},{&#39;src&#39;:&#39;43.jpg&#39;},{&#39;src&#39;:&#39;44.jpg&#39;},{&#39;src&#39;:&#39;45.jpg&#39;}]};
 window.onscroll=function(){
 var isPosting = false;
 if(checkscrollside(&#39;main&#39;,&#39;box&#39;) && !isPosting){
  isPosting = true;
  $.each(dataJson.data,function(index,dom){
  var $box = $(&#39;<div class="box"></div>&#39;);
  $box.html(&#39;<div class="pic"><img  src="./images/&#39;+$(dom).attr(&#39;src&#39;)+&#39;" alt="瀑布流佈局影片資料分享" ></div>&#39;);
  $(&#39;#main&#39;).append($box);
  waterfall(&#39;main&#39;,&#39;box&#39;);
  isPosting = false;
  });
 }
 }
});
/*
 parend 父级id
 clsName 元素class
 */
function waterfall(parent,clsName){
 var $parent = $(&#39;#&#39;+parent);//父元素
 var $boxs = $parent.find(&#39;.&#39;+clsName);//所有box元素
 var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽
 var cols = Math.floor( $( window ).width() / iPinW );//列数
 $parent.width(iPinW * cols).css({&#39;margin&#39;: &#39;0 auto&#39;});
 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
 $boxs.each( function( index, dom){
 if( index < cols ){
  pinHArr[ index ] = $(dom).height(); //所有列的高度
 }else{
  var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
  var minHIndex = $.inArray( minH, pinHArr );
  $(dom).css({
  &#39;position&#39;: &#39;absolute&#39;,
  &#39;top&#39;: minH + 15,
  &#39;left&#39;: $boxs.eq( minHIndex ).position().left
  });
  //添加元素后修改pinHArr
  pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
 }
 });
}
//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
function checkscrollside(parent,clsName){
 //最后一个块框
 var $lastBox = $(&#39;#&#39;+parent).find(&#39;.&#39;+clsName).last(),
 lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
 scrollTop = $(window).scrollTop(),
 documentH = $(document).height();
 return lastBoxH < scrollTop + documentH ? true : false;
}

登入後複製

以上是瀑布流佈局影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！