Teilen von Videomaterial zum Wasserfall-Flusslayout

Wasserfallfluss, auch Wasserfallflusslayout genannt. Es handelt sich um ein relativ beliebtes Website-Seitenlayout. Die visuelle Leistung ist ein gezacktes mehrspaltiges Layout. Wenn die Bildlaufleiste der Seite nach unten scrollt, lädt dieses Layout kontinuierlich Datenblöcke und hängt sie an das aktuelle Ende an. Die erste Website, die dieses Layout übernahm, war Pinterest, das in China nach und nach populär wurde. Die meisten inländischen Fresh-Websites haben grundsätzlich diesen Stil.

Wasserfall-Layout ist eine beliebte Layout-Methode für Websites. In diesem Fall werden die drei wichtigsten Methoden zur Implementierung des Wasserfall-Flow-Layouts ausführlich erläutert: JavaScript, jQurey und CSS3. Sie erfahren, wie Sie JavaScript-Methoden zum Positionieren und Sortieren von Bildern verwenden, zwei verschiedene Methoden zum kontinuierlichen Laden von Bildern und mehrere Methoden in CSS3. So implementieren Sie das Wasserfall-Flow-Layout im Spaltenlayout.

Adresse für die Videowiedergabe: http://www.php.cn/course/301.html

Schwierigkeiten beim Lernen:

$( window ).on( "load", function(){
 waterfall('main','box');
 //模拟数据json
 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
 window.onscroll=function(){
 var isPosting = false;
 if(checkscrollside('main','box') && !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="Teilen von Videomaterial zum Wasserfall-Flusslayout" ></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;
}

Das obige ist der detaillierte Inhalt vonTeilen von Videomaterial zum Wasserfall-Flusslayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!