滝の流れレイアウト動画素材共有-jsチュートリアル-php.cn

滝の流れレイアウト動画素材共有

巴扎黑

リリース： 2017-08-30 11:33:57

オリジナル

1802 人が閲覧しました

滝の流れ、滝の流れレイアウトとも呼ばれます。これは、一般的な Web サイトのページレイアウトであり、視覚的なパフォーマンスはギザギザの複数列レイアウトであり、ページスクロールバーが下にスクロールすると、データブロックが継続的に読み込まれ、現在の末尾に追加されます。このレイアウトを最初に採用した Web サイトは Pinterest で、中国で徐々に人気が高まりました。国内のフレッシュサイトは基本的にこのスタイルが多いです。

ウォーターフォールレイアウトは、ウェブサイトでよく使われるレイアウト方法です。このケースでは、ウォーターフォールフローレイアウトを実装する 3 つの主要な方法 (JavaScript、jQurey、CSS3) について詳しく説明します。JavaScript メソッドを使用して画像を配置および並べ替える方法、画像を継続的に読み込む 2 つの異なる方法、および複数の方法を学びます。 CSS3 のメソッド。カラムレイアウトでウォーターフォールフローレイアウトを実装する方法。

滝の流れレイアウト動画素材共有

ビデオ再生アドレス: //m.sbmmt.com/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 中国語 Web サイトの他の関連記事を参照してください。