网站地图    收藏   

子栏目

主页 > 前端 > javascript >

js实现瀑布流排序加载效果

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 瀑布流是一种比较适用于相册或图片管理站点，像现在百度图片都使用瀑布流效果，下面我来介绍向种实现 瀑布流实例。...


方法一，js实现瀑布流排序

 代码如下 复制代码

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>js实现瀑布流排序</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
li{ list-style:none;}
.wrapper {padding:50px;}


</style>
<link href="style.css" rel="stylesheet" type="text/css" />

<body>

<div class="wrapper">


<div id="wrap" class="wrap active">
 <script language="javascript">
 var $id = function(o){ return document.getElementById(o) || o};
 for(i=0;i<30;i++){
  var src = Math.floor(Math.random()*100);
  if(src<10){src="0"+src}
  if(src<100){src="0"+src}
  var div = document.createElement("div");
  div.className = "mode popup_in";
  div.innerHTML =  "<p class='pic'><a href='#'><img src=/notfound.jpg style='height:"+"auto"+";'/></a></p><h3 class='tit'><span><a href='#'>"+src+".jpg</a></span></h3>";
  div.style.top = 0;
  div.style.left = 0;
  document.getElementById("wrap").appendChild(div);
 }
 </script>
</div>

<script type="text/javascript">
var warpWidth = 220; //格子宽度
var margin = 14; //格子间距
function postPosition(el,childTagName){
 var h = []; //记录每列的高度
 var box = el.getElementsByTagName(childTagName); 
 var minH = box[0].offsetHeight,
 boxW = box[0].offsetWidth+margin;
 n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
 el.style.width = n * boxW - margin + "px";
 el.style.visibility = "visible";
 for(var i = 0; i < box.length; i++) {//排序算法，有待完善
  boxh = box[i].offsetHeight; //获取每个Pin的高度
  if(i < n) { //第一行特殊处理
    h[i] = boxh;
    box[i].style.top = 0 + 'px';
    box[i].style.left = (i * boxW) + 'px';
  }
  else {
    minH = Array.min(h); //取得各列累计高度最低的一列
    minKey = getarraykey(h, minH);
    h[minKey] += boxh+margin ; //加上新高度后更新高度值
    el.style.height = h[minKey] +"px";
    box[i].style.top = minH+margin + 'px';
    box[i].style.left = (minKey * boxW) + 'px';
  }
 }
 for(var i = 0; i < box.length; i++) {
  box[i].style.visibility = "visible"; //定位完毕后显示新增节点
 }
}
Array.min=function(array)
{
    return Math.min.apply(Math,array);
}
/* 返回数组中某一值的对应项数 */
function getarraykey(s, v) {
        for(k in s) {
                if(s[k] == v) {
                        return k;
                }
        }
}

window.onload = function() {
 postPosition($id("wrap"),"div");
};

var re;
window.onresize = function() {
 clearTimeout(re);
 re = setTimeout(resize,100);    
};

function resize(){
 $id("wrap").className = "wrap active";
 postPosition($id("wrap"),"div");
}


</script>
<div id="aaa1" style="display:none;position: fixed;width:400px;height:200px;background:#000;color:#fff;top:30%;left:50%"></div>


</div>


</body>
</html>


实例二，js基于多栏列表瀑布流布局

 代码如下 复制代码

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>js基于多栏列表瀑布流布局demo</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
li{ list-style:none;}
.wrapper {padding:50px;}
</style>

<style>
body {
 background-color: #eee;
 font-size: 84%;
 text-align: justify;
}
.column {
 display: inline-block;
 vertical-align: top;
}
.pic_a {
 display: block;
 padding: 5px;
 margin-bottom: 10px;
 border: 1px solid #ccc;
 background-color: #fff;
 text-decoration: none;
}
.pic_a img {
 display: block;
 margin: 0 auto 5px;
 border: 0;
 vertical-align: bottom;
}
.pic_a strong {
 color: #333;
}
</style>

<body>

<div class="wrapper">


<div id="container"></div>
<script>
var waterFall = {
 container: document.getElementById("container"),
 columnNumber: 1,
 columnWidth: 210,
 // P_001.jpg ~ P_160.jpg
 rootImage: "http://cued.xunlei.com/demos/publ/img/",
 indexImage: 0,
 
 scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
 detectLeft: 0,
 
 loadFinish: false,
 
 // 返回固定格式的图片名
 getIndex: function() {
  var index = this.indexImage;
  if (index < 10) {
   index = "00" + index; 
  } else if (index < 100) {
   index = "0" + index; 
  }
  return index;
 },
 
 // 是否滚动载入的检测
 appendDetect: function() {
  var start = 0;
  for (start; start < this.columnNumber; start++) {
   var eleColumn = document.getElementById("waterFallColumn_" + start);
   if (eleColumn && !this.loadFinish) {
    if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
     this.append(eleColumn);
    }
   }   
  }
  
  return this;
 },
 
 // 滚动载入
 append: function(column) {
  this.indexImage += 1;
  var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";
  
  // 图片尺寸
  var aEle = document.createElement("a");
  aEle.href = "###";
  aEle.className = "pic_a";
  aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>';
  column.appendChild(aEle);
  
  if (index >= 160) {
   //alert("图片加载光光了！");
   this.loadFinish = true;
  }
  
  return this;
 },
 
 // 页面加载初始创建
 create: function() {
  this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
  
  var start = 0, htmlColumn = '', self = this;
  for (start; start < this.columnNumber; start+=1) {
   htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+
    function() {
     var html = '', i = 0;
     for (i=0; i<5; i+=1) {
      self.indexImage = start + self.columnNumber * i;
      var index = self.getIndex();
      html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>';
     }
     return html; 
    }() +
   '</span> '; 
  }
  htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
  
  this.container.innerHTML = htmlColumn;
  
  this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
  return this;
 },
 
 refresh: function() {
  var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
  for (start; start < this.columnNumber; start+=1) {
   var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|n|r|s)*?a>/gi);
   if (arrColumn) {
    maxLength = Math.max(maxLength, arrColumn.length);
    // arrTemp是一个二维数组
    arrTemp.push(arrColumn);
   }
  }
  
  // 需要重新排序
  var lengthStart, arrStart;
  for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
   for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
    if (arrTemp[arrStart][lengthStart]) {
     arrHtml.push(arrTemp[arrStart][lengthStart]); 
    }
   } 
  }
  
  
  if (arrHtml && arrHtml.length !== 0) {
   // 新栏个数  
   this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
   
   // 计算每列的行数
   // 向下取整
   var line = Math.floor(arrHtml.length / this.columnNumber);
   
   // 重新组装HTML
   var newStart = 0, htmlColumn = '', self = this;
   for (newStart; newStart < this.columnNumber; newStart+=1) {
    htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+
     function() {
      var html = '', i = 0;
      for (i=0; i<line; i+=1) {
       html += arrHtml[newStart + self.columnNumber * i];
      }
      // 是否补足余数
      html = html + (arrHtml[newStart + self.columnNumber * line] || '');
      
      return html; 
     }() +
    '</span> '; 
   }
   htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
  
   this.container.innerHTML = htmlColumn;
   
   this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
   
   // 检测
   this.appendDetect();
  }
  return this;
 },
 
 // 滚动加载
 scroll: function() {
  var self = this;
  window.onscroll = function() {
   // 为提高性能，滚动前后距离大于100像素再处理
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
    self.scrollTop = scrollTop;
    self.appendDetect(); 
   }
   
  };
  return this;
 },
 
 // 浏览器窗口大小变换
 resize: function() {
  var self = this;
  window.onresize = function() {
   var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
   if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
    // 检测标签偏移异常，认为布局要改变
    self.refresh(); 
   }
  };
  return this;
 },
 init: function() {
  if (this.container) {
   this.create().scroll().resize(); 
  }
 }
};
waterFall.init();
</script>


</div>

</body>
</html>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论