二、瀑布流数据加载后的布局处理（瀑布流的封装）
2013-04-09 16:46
441 查看
html代码：
water.js代码
drag.js代码
实现效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流第二步封装函数</title>
<style>
*{margin:0px;padding:0px;}
#main .pin{
width:225px;
height:auto;
padding:15px 0px 0px 15px;
float:left;
}
#main .pin .box{
width:205px;
height:auto;
padding:10px;
background:#FFF;
border:1px solid #CCC;
box-shadow:0px 0px 6px #CCC;
border-radius:5px;
}
#main .pin .box img{
width:205px;
}
</style>
<!-- 页面拖拽插件 -->
<script type="text/javascript" src="./js/drag.js"></script>
<!-- 瀑布流封装 -->
<script type="text/javascript" src="./js/water.js"></script>
</head>
<body>
<div id="main">
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/0.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/1.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/2.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/3.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/4.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/5.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/6.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/7.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/8.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/4.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/7.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/8.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/9.png">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/0.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/1.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/2.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/5.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/4.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/0.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/1.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/5.jpg">
</div>
</div>
<div class="pin"><!--每一个小块-->
<div class="box">
<img src="./img/3.jpg">
</div>
</div>
</div>
</body>
</html>water.js代码
/**
*
*/
window.onload = function(){
//0调用函数
//定义json数据
var data = [{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}];
window.onscroll = function(){
if(checkscrollsite()){
//创建父节点
var oParent = document.getElementById('main');
for(i in data){
//alert(data[i].src);
//创建父级的元素节点
var oPin = document.createElement('div');
oPin.className = 'pin';
oParent.appendChild(oPin);
var oBox = document.createElement('div');
oBox.className = 'box';
oPin.appendChild(oBox);
var oImg = document.createElement('img');
oImg.src = './img/'+data[i].src;
oBox.appendChild(oImg);
}
waterfall('main','pin');
}
}
}
/**
parent 父级 id
pin 具体瀑布流块，class类名
*/
function waterfall(parent,pin) {
//2.定义父级
var oParent = document.getElementById(parent);
//9.调用函数并定义
var aPin = getClassObj(oParent,pin);
//alert(aPin.length);
var iPinW = aPin[0].offsetWidth;
//alert(iPinW);
//10.计算页面可以放下多少个图片
var num = Math.floor(document.documentElement.clientWidth/iPinW);
//alert(num);
//11.设置父级居中的样式
oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;';
//12准备一个数组
var compareAarr = [];
//17定义一个字符串
//var str = '';
//13
for(var i=0;i<aPin.length;i++){
//22设置第一行的数量
if(i<num){
//获取每个图品的offsetHeight值
compareAarr[i] = aPin[i].offsetHeight;
//17获取高度的索引
//str += i+'=>'+aPin[i].offsetHeight+'\n';
//23
}else{
//取数组中的最小高度 compareAarr
var minH = Math.min.apply({},compareAarr);
//获取最小的key值
var minKey = getMinKey(compareAarr,minH);
//定位超出宽度多的那个
aPin[i].style.position = 'absolute';
//取超出的那个图片的top值
aPin[i].style.top = minH + 'px';
//设置超出那个图片的left值
aPin[i].style.left = aPin[minKey].offsetLeft + 'px';
//超出最后一个在加一 重新计算最低minH
compareAarr[minKey] += aPin[i].offsetHeight;
}
}
//14 取数组中的最小高度 compareAarr
//var minH = Math.min.apply({},compareAarr);
//19获取最小的key值
//var minKey = getMinKey(compareAarr,minH);
//alert(minKey);
//alert(minH);
//15定位超出宽度多的那个
//aPin[num].style.position = 'absolute';
//16取超出的那个图片的top值
//aPin[num].style.top = minH + 'px';
//20设置超出那个图片的left值
//aPin[num].style.left = aPin[minKey].offsetLeft + 'px';
//21超出最后一个在加一 重新计算最低minH
//compareAarr[minKey] += aPin[num].offsetHeight;
//alert(compareAarr);
//var minH = Math.min.apply({},compareAarr);
//var minKey = getMinKey(compareAarr,minH);
//aPin[num+1].style.position = 'absolute';
//aPin[num+1].style.top = minH + 'px';
//aPin[num+1].style.left = aPin[minKey].offsetLeft + 'px';
//实现图片的拖拽
for(var i=num;i<aPin.length;i++){
//绝对定位
aPin[i].style.position = 'absolute';
drag(aPin[i]);
}
}
/**
* 检测根据浏览器的高度加载图片
*/
function checkscrollsite(){
var oParent = document.getElementById('main');
var aPin = getClassObj(oParent,'pin');
//最后图片的高度
var lastPinH =aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);
//最后滚动条的高度
var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
//
var documentH = document.documentElement.clientHeight;
//if(lastPinH<srcollTop+documentH){
// return true;
//}else{
// return false;
//}
return lastPinH<srcollTop+documentH?true:false;
}
/**
获取数组组最小的键值
arr数组
minH最小键值
*/
//18定义一个函数 获取数组(compareAarr)中对应的最小的那个高的值(minH)
function getMinKey(arr,minH){
for(key in arr){
if(arr[key] == minH){
return key;
}
}
}
/**
通过class选择元素
parent父级
className类名
*/
//3.定义一个函数
function getClassObj(parent,className){
//4.定义匹配父级下面所有的元素
var obj = parent.getElementsByTagName('*');
//5.定义一个数组
var result = [];
//6.循环obj
for(var i=0;i<obj.length;i++){
if(obj[i].className == className){
//7.pushu进result中
result.push(obj[i]);
}
}
//8
return result;
}drag.js代码
//拖拽方法
var zIndex = 1;
function drag(obj, vW){
var obj = obj;
var vW = vW?vW:document.documentElement.clientWidth;
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var oEvent = ev || event;
disX = oEvent.clientX - obj.offsetLeft;
disY = oEvent.clientY - obj.offsetTop;
obj.style.zIndex = zIndex;
zIndex++;
if (obj.setCapture) {
obj.onmousemove = fnMove;
obj.onmouseup = fnUp;
obj.setCapture();
}
else {
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
function fnUp(){
this.onmousemove = null;
this.onmouseup = null;
if (this.releaseCapture)
this.releaseCapture();
}
function fnMove(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var w = vW- obj.offsetWidth;
var h = document.documentElement.clientHeight - obj.offsetHeight + scrollTop;
if (l < 10)
l = 0;
if (l > w - 10)
l = w;
if (t < 10)
t = 0;
if (t > h - 10)
t = h;
obj.style.left = l + 'px';
obj.style.top = t + 'px';
}
return false;
}
}实现效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 二、瀑布流数据加载后的布局处理（瀑布流的封装）
- 封装Activity基类的时候数据重复加载的处理
- jQuery-瀑布流 布局 （处理页面滚动和AJAX加载延迟问题）
- 从JSON取数据实现图片瀑布流布局的数据动态加载
- 数字图像处理 CImage类的使用与封装(jpg png gif tif bmp等格式图像的加载、数据读写、保存等功能)
- RecyclerView适配器的封装，针对于要加载数据、没有更多，没有数据的情况的处理
- RxJava + Retrofit+okhttp 封装，包含对相同格式请求数据、相同格式返回数据处理，显示 Material Design 加载 dialog，文件上传下载进度展示、全局异常捕捉。
- 瀑布流-UICollectionView 的从新布局，动态加载HTML数据，HTML数据的解析和UICollectionViewFlowLayout的从布
- js 处理加载数据等待
- AJAX异步请求,底层使用hibernate查询后的数据json封装之前的处理
- 数据封装和处理--C语言
- Flex 3快速入门: 处理数据 使用 HTTPService 加载外部数据
- 基于表单数据的封装，泛型，反射以及使用BeanUtils进行处理
- jquery实现瀑布流效果＋下拉加载新数据
- jQuery瀑布流加载更多数据
- 利用Volley封装好的图片缓存处理加载图片
- ListView动态加载数据模板（使用代码布局）
- Android自定义网络数据加载等待框的简单封装
- Android使用OKHTTP网络框架请求数据，RecyclerView结合Glide展示图片，瀑布流布局样式
- 【android动态布局】之【ListView动态加载数据模板（使用xml布局）】