Skip to content

Instantly share code, notes, and snippets.

@markyun
Created December 30, 2013 02:20
Show Gist options
  • Save markyun/8177048 to your computer and use it in GitHub Desktop.
Save markyun/8177048 to your computer and use it in GitHub Desktop.
瀑布流(浮动版) demo
/*----------------------------css-----------------------------------*/
<style type="text/css">
body{background: #000}
body,img{margin: 0;padding: 0}
.box{padding: 20px;}
.box .col{width: 214px;margin-right: 15px;float: left;}
.box a{display: block;padding: 5px;border: 1px solid #222;background-color: #000;text-decoration:none;margin-bottom: 20px;text-align: center;}
.box a:hover{background: #ff3b26;cursor: pointer;}
.box img{}
.box .mrn{margin-right: 0}
.loading{position: fixed;left: 50%;margin-left: -110px;bottom: 0;text-align: center;width: 200px;background: #FFF;padding: 10px;border-radius: 10px 10px 0 0;opacity: 0.7;}
.clearfix:after{clear:both; content:"."; display:block; height:0; line-height:0; font-size:0; visibility:hidden; }
.clearfix{zoom:1;}
</style>
/*----------------------------HTML-----------------------------------*/
<div id="box" class="box clearfix">
<!-- <div id="col0" class="col"></div>
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
<div id="col4" class="col mrn"></div> -->
<!-- <div id="col5" class="col mrn"></div> -->
</div>
<div id="loading" class="loading">
<img src="loading.gif" alt="" />
</div>
/*----------------------------js-----------------------------------*/
;(function(){
var $box = $('box'),
url = 'blogs/tags/hot/?tags=春装%2C发型%2C美妆%2C街拍%2C婚纱&_type=&page=',
url = '../waterfall/php_proxy_simple.php?yws_path=' + encodeURIComponent(url);
var waterfall = waterfall || {};
waterfall.options = {
colHeights: [],//每列高度
minHeight: 0,//最小高度
colNum: 0,//列数
colWidth: 214,//列宽
firstRowNum: 0,//第一行列数
marginRight: 15,//默认右边距
paddingRight: 20,//默认容器内边距
viewWidth: 0,//可视区域宽度(不包含滚动条)
images: 0,//图片数量
page: 1,//默认第一页数据
isAjax: true//是否正在加载...
}
waterfall.init =function(){
waterfall.fn.createCol();
waterfall.fn.getData(url,1);
}
waterfall.fn = {
createCol:function(){
var col = [], contentWidth = overWidth = avgMargin = 0, html = '';
//计算可视区域宽度(不包含滚动条)
waterfall.options.viewWidth = (document.documentElement.clientWidth || document.body.clientWidth) - getScrollWidth() - (waterfall.options.paddingRight * 2);
//计算需要生成的列数
waterfall.options.colNum = waterfall.options.firstRowNum = Math.floor(waterfall.options.viewWidth / (waterfall.options.colWidth + waterfall.options.marginRight));
//获取内容实际宽度
contentWidth = (waterfall.options.colNum * (waterfall.options.colWidth + waterfall.options.marginRight));
//计算剩余空白宽度
overWidth = waterfall.options.viewWidth - contentWidth;
//计算平均分配间距
avgMargin = (overWidth + waterfall.options.marginRight) / (waterfall.options.colNum - 1);
//遍历HTML
for(var i = 0; i < waterfall.options.colNum; i++){
col[i] = '<div id="col'+ [i] +'" class="col" style="margin-right:'+ ((i == waterfall.options.colNum - 1) ? 0 : (avgMargin + waterfall.options.marginRight)) +'px"></div>';
}
html = col.join(' ');
$box.style.width = waterfall.options.viewWidth + 'px';
$box.innerHTML = html;
},
createXHR:function(){
//判断是否支持XMLHttpRequest
if(XMLHttpRequest){
return new XMLHttpRequest();
}else if(ActiveXObject){
return new ActiveXObject('MSXML.XMLHttp');//IE6
}else{
throw new Error('没有XHR对象');
}
},
getData:function(url,page){
if(waterfall.options.isAjax){
waterfall.options.isAjax = false;
var xhr = waterfall.fn.createXHR();
xhr.open('get',url + page,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var data = eval('('+xhr.responseText+')');
waterfall.fn.fillData(data);
}else{
}
}
}
},
fillData:function(data){
if(data.success){
$('loading').style.display = 'none';//隐藏loading
waterfall.options.isAjax = false;//正在加载中...
var list = data.data.blogs, links = [];
//生成结构
for(var i = 0, len = list.length; i < len; i++){
var n = i % waterfall.options.colNum, index = -1;//列数取模,高度最小的那一列索引
//从第二排开始计算
if(--waterfall.options.firstRowNum < 0){
waterfall.options.minHeight = Math.min.apply(null,waterfall.options.colHeights),//最小高度
index = indexOf(waterfall.options.colHeights,waterfall.options.minHeight);//高度最小的那一列索引
}
var m = (index > -1) ? index : n;
waterfall.options.colHeights[m] = waterfall.options.colHeights[m] ? waterfall.options.colHeights[m] + list[i].iht : list[i].iht;//最小高度那一列高度累加
//生成砖块
var a = document.createElement('a');
a.style.height = list[i].iht + 'px';
a.setAttribute('alt', waterfall.options.images++);
$('col'+ m).appendChild(a);
links[i] = a;
}
//加载图片
for(var i = 0, len = links.length; i < len; i++){
loadImg(links[i],list[i]);
}
waterfall.options.isAjax = true;
}
}
}
window.onscroll = function(){
if((document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight + 200 >= document.body.scrollHeight && waterfall.options.isAjax){
$('loading').style.display = 'block';
console.log('page='+waterfall.options.page);
waterfall.fn.getData(url,++waterfall.options.page);
}
}
function $(id){
return document.getElementById(id);
}
//加载图片
function loadImg(a,item){
var img = new Image();
img.onload = function(){
a.appendChild(this);
}
img.src = item.isrc;
}
//fadeIn
function unlimitedCallback(elem,callback,args){
var i = 0;
(function(i){
elem.style.opacity = ++i;
if(i <= 100){
setTimeout(arguments.callee,20);
}else{
callback.apply(null,args);
}
})(i);
}
//获取滚动条宽度
function getScrollWidth(){
var noScrollWidth, scrollWidth,
div = document.createElement('div');
div.style.cssText = 'position:absolute;left:-9999px;width:50px;height:50px;';
noScrollWidth = document.body.appendChild(div).clientWidth;
div.style.overflowY = 'scroll';
scrollWidth = div.clientWidth;
document.body.removeChild(div);
return noScrollWidth - scrollWidth;
}
//根据值获取数组索引
var indexOf = Array.prototype.indexOf
? function(){
var args = Array.prototype.slice.call(arguments, 1);
return Array.prototype.indexOf.apply(arguments[0], args);
}
: function (arr, obj, fromIndex) {
if (fromIndex == null) {
fromIndex = 0;
} else if (fromIndex < 0) {
fromIndex = Math.max(0, arr.length + fromIndex);
}
for (var i = fromIndex; i < arr.length; i++) {
if (arr[i] === obj){
return i;
}
}
return -1;
};
waterfall.init();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment