瀑布流布局视频资料分享-js教程-PHP中文网

瀑布流布局视频资料分享

巴扎黑

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

原创

1748 人浏览过

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流布局是网站比较流行的一种布局方式。本案例将深入讲解实现瀑布流布局的三大方式：JavaScript、jQurey和CSS3，你将学习到如何用JavaScript方法实现图片的定位及排序、两种不同的方式对图片进行持续加载，以及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中文网其他相关文章！