폭포 흐름 레이아웃 영상 자료 공유-JS 튜토리얼-php.cn

폭포 흐름 레이아웃 영상 자료 공유

巴扎黑

풀어 주다： 2017-08-30 11:33:57

원래의

1672명이 탐색했습니다.

폭포 흐름, 폭포 흐름 레이아웃이라고도 합니다. 이는 인기 있는 웹 사이트 페이지 레이아웃입니다. 페이지 스크롤 막대가 아래로 스크롤됨에 따라 이 레이아웃은 지속적으로 데이터 블록을 로드하고 현재 꼬리에 추가합니다. 이 레이아웃을 채택한 첫 번째 웹사이트는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!