网络编程

深入学习js瀑布流布局
网络编程 2025/10/27 佚名
3 2

本文实例为大家分享了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实现的瀑布流不会有上面的缺点，但是性能相对要差！


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


                                

                                

                                     

                                

                                    标签：
                                        
js,瀑布流,布局
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“深入学习js瀑布流布局”

暂无“深入学习js瀑布流布局”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com