DDR爱好者之家

深入学习js瀑布流布局
站长资源 2024/11/28 佚名
5 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了js瀑布流布局学习资料，供大家参考，具体内容如下

特点：等宽不等高。
实现方式：Javascript/Jquery/CSS3多栏布局。
样例网站：花瓣网-->分类

一、JS实现瀑布流

index.html:页面结构    

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流布局</title>
  <link rel="stylesheet" href="styles/layout.css">
</head>
<body>
  <div id="main">
    <div class="box"><div class="pic"><img src="/UploadFiles/2021-04-02/0.jpg">


layout.css:页面元素样式





*{
  pdding:0;
  margin:0;
}
div#main{
  position: relative;
}
div.box{
  padding:15px 0 0 15px;
  float: left;
}
div.pic{
  padding:10px;
  border:1px solid #ccc;
  border-radius:5px;
  box-shadow: 0 0 5px #ccc;
}
.pic img{
  height:auto;
  width:165px;
}





waterfall.js





window.onload=function(){
  waterFall('main','box');
  //模拟后台相应数据json
  var dataInt={
    "data":
    [
     {"src":"0.jpg"},
     {"src":"1.jpg"},
     {"src":"2.jpg"},
     {"src":"3.jpg"},
     {"src":"4.jpg"},
     {"src":"5.jpg"},
     {"src":"6.jpg"}
    ]
  }
  window.onscroll=function(){
    if(checkScrollSlide){
      //将数据块渲染到当前页面的尾部
     var oParent=document.getElementById("main");
     for(var i=0;i<dataInt.data.length;i++){
       var oBox=document.createElement("div");
       oBox.className="box";
       oParent.appendChild(oBox);
       var oPic=document.createElement("div");
       oPic.className="pic";
       oBox.appendChild(oPic);
       var img=document.createElement("img");
       img.setAttribute("src",dataInt.data[i]);
       img.src="/UploadFiles/2021-04-02/">



$( window ).on( "load", function(){
  waterfall('main','pin');
  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  window.onscroll=function(){
    if(checkscrollside()){
      $.each( dataInt.data, function( index, value ){
        var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );
        var $oBox = $('<div>').addClass('box').appendTo( $oPin );
        $('<img>').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
      });
      waterfall();
    };
  }
});

/*
  parend 父级id
  pin 元素id
*/
function waterfall(parent,pin){
  var $aPin = $( "#main>div" );
  var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
  var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
  //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
  $( "#main" ).css({
    'width:' : iPinW * num,
    'margin': '0 auto'
  });

  var pinHArr=[];//用于存储 每列中的所有块框相加的高度。

  $aPin.each( function( index, value ){
    var pinH = $aPin.eq( index ).height();
    if( index < num ){
      pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
    }else{
      var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
      var minHIndex = $.inArray( minH, pinHArr );
      $( value ).css({
        'position': 'absolute',
        'top': minH + 15,
        'left': $aPin.eq( minHIndex ).position().left
      });
      //数组 最小高元素的高 + 添加上的aPin[i]块框高
      pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
    }
  });
}

function checkscrollside(){
  var $aPin = $( "#main>div" );
  var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  var scrollTop = $( window ).scrollTop()//注意解决兼容性
  var documentH = $( document ).height();//页面高度
  return (lastPinH < scrollTop + documentH ) "htmlcode">



.container{
  -webkit-column-width:160px;
  -moz-column-width:160px; 
   -webkit-column-gap:5px;
   -moz-column-gap:5px;
}


/*数据块 砖块*/

.container div{width:160px;
        margin:4px 0;}







【css3和js实现方法比较】

--css3方式--

1：不需要计算，浏览器自动计算，只需设置1列宽，性能高

2:列宽随着浏览器宽口大小进行改变，用户体验不好；

3：图片排序按照垂直顺序排列，打乱图片显示顺序

4.图片加载还是需要js

--js方式--

js实现的瀑布流不会有上面的缺点，但是性能相对要差！


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米