Partage de matériel vidéo de mise en page de flux en cascade-js tutoriel-php.cn

Partage de matériel vidéo de mise en page de flux en cascade

巴扎黑

Libérer： 2017-08-30 11:33:57

original

1740 Les gens l'ont consulté

Débit en cascade, également connu sous le nom de disposition du débit en cascade. Il s'agit d'une mise en page de site Web populaire. La performance visuelle est une mise en page multi-colonnes irrégulière. À mesure que la barre de défilement de la page défile vers le bas, cette mise en page chargera en permanence les blocs de données et les ajoutera à la queue actuelle. Le premier site Web à adopter cette mise en page fut Pinterest, qui devint progressivement populaire en Chine. La plupart des nouveaux sites Web nationaux sont essentiellement de ce style.

La mise en page en cascade est une méthode de mise en page populaire pour les sites Web. Ce cas donnera une explication approfondie des trois principales façons d'implémenter la disposition des flux en cascade : JavaScript, jQurey et CSS3. Vous apprendrez à utiliser les méthodes JavaScript pour positionner et trier les images, deux manières différentes de charger des images en continu et plusieurs. méthodes en CSS3. Comment implémenter la disposition du flux en cascade dans la disposition en colonnes.

Partage de matériel vidéo de mise en page de flux en cascade

Adresse de lecture vidéo : http://www.php.cn/course/301.html

Difficultés d'apprentissage :

$( 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="Partage de matériel vidéo de mise en page de flux en cascade" ></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;
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!