jq js css3 实现瀑布流

向太阳天

于 2016-04-25 10:33:24 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/qq_29220231/article/details/51240396

版权

css3：只是设置列宽属性简单明了大要实现无限下拉还是需要靠js

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3实现的瀑布流</title>
</head>
<style type="text/css">

.container{
-webkit-column-width:242px;
-moz-column-width:242px;
-o-column-width:242px;
-ms-column-width:242px;
}
/* -moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o- opera*/

.container div{width:160px;
margin:4px 5px;}
</style>
<body>
<div class="container">
<div><img src="images/0.jpg" /></div>
<div><img src="images/1.jpg" /></div>
<div><img src="images/2.jpg" /></div>
<div><img src="images/3.jpg" /></div>
<div><img src="images/4.jpg" /></div>
<div><img src="images/5.jpg" /></div>
<div><img src="images/6.jpg" /></div>
<div><img src="images/7.jpg" /></div>
<div><img src="images/8.jpg" /></div>
<div><img src="images/9.jpg" /></div>
<div><img src="images/10.jpg" /></div>
<div><img src="images/11.jpg" /></div>
<div><img src="images/12.jpg" /></div>
<div><img src="images/13.jpg" /></div>
<div><img src="images/14.jpg" /></div>
<div><img src="images/15.jpg" /></div>
<div><img src="images/16.jpg" /></div>
<div><img src="images/17.jpg" /></div>
<div><img src="images/18.jpg" /></div>
<div><img src="images/19.jpg" /></div>
<div><img src="images/5.jpg" /></div>
<div><img src="images/6.jpg" /></div>
<div><img src="images/7.jpg" /></div>
<div><img src="images/8.jpg" /></div>
<div><img src="images/9.jpg" /></div>
<div><img src="images/10.jpg" /></div>
<div><img src="images/11.jpg" /></div>
<div><img src="images/12.jpg" /></div>
<div><img src="images/13.jpg" /></div>
<div><img src="images/5.jpg" /></div>
<div><img src="images/6.jpg" /></div>
<div><img src="images/7.jpg" /></div>
<div><img src="images/8.jpg" /></div>

</div>
</body>
</html>

方法二： js

html样式：

加载js：

window.οnlοad=function(){ //页面全部加在完成包括图片执行脚本

waterfall('main','pin');//图片定位封装成一个函数

var dateInt={"date":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'}]}//对象数据名为date值为数组
window.οnscrοll=function(){//JavaScript onscroll 事件：滚动条发生滚动及利用 onscroll 来实现返回顶部效果
if(checkScrollSlide){
//将数据块放在页面底部
var oParent=document.getElementById('main');
for(i=0;i<dateInt.date.length;i++){
var opin=document.createElement('div');
opin.className='pin';
oParent.appendChild(opin); //append 将子元素添加到父元素内
var obox=document.createElement('div');
obox.className='box';
opin.appendChild(obox);
var oImg=document.createElement('img');
oImg.src="images/"+dateInt.date[i].src;
obox.appendChild(oImg);
}
waterfall('main','pin')
}
}

}

//获取id下所有class节点
function waterfall(parent,pin){

var oParent=document.getElementById(parent);
var oclas=getByclass(oParent,pin); //获取main下所有class为box的节点之后还要用到所以封装指向一个函数取pin

//计算页面显示的列数（页面宽度/box的宽度）
var oBoxW=oclas[0].offsetWidth;
//alert(oBoxW) // 宽度=162+内边距10*2+ 边框宽度1*2+15；
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//设置main的宽
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';

var hArr=[];//再来获取第一行所有图片的高度
for(i=0;i<oclas.length;i++){
if(i<cols){
hArr.push(oclas[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr)
//math.min只能求取一组数据的最小，不能应用与数组。只能借助apply方法没更改this指向
var minLindex= getW(hArr,minH); //最小宽度索引

oclas[i].style.position='absolute';
oclas[i].style.top=minH+'px';
oclas[i].style.left=minLindex*oBoxW+'px';
hArr[minLindex]+=oclas[i].offsetHeight;
}
}

}
function getByclass(parent,claName){

var li=new Array(); //用来存储获取到的所有名为pin的class
ocla=parent.getElementsByTagName('*'); //获取main下所有的子元素
for(var i=0;i<ocla.length;i++){
if(ocla[i].className==claName){
li.push(ocla[i]);
}
}
return li;
}
function getW(arr,val){

for(var i in arr){
if(arr[i]==val){
return i;

}
}
}
function checkScrollSlide(){
var oParent=document.getElementById('main');

var opic=getByclass(oParent,'pin');

var lastPinH=opic[opic.length-1].offsetTop+Math.floor(opic[opic.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop ||document.documentElement.scrollTop;//标准模式混杂模式浏览器兼容
var height=document.body.clientHeight || document.documentElement.clientHeight;
return(lastPinH>scrollTop+height?ture:false) // 单元操作符

}

方法三：

加载jq 1.8.3版本

// JavaScript Document JQ就不用这么麻烦了

$(window).on('load',function(){ //给window绑定on事件 on可给元素绑定事件

waterfall();//不用传递参数，jq提供了强大的选择器可要通过class直接找到
var dateInt={"date":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'}]};
$(window).on('scroll',function(){

if(checkScroll){
//将数据块放在页面底部
$.each(dateInt.date,function(key,value){ //
var oBox=$('<div>').addClass('pin').appendTo($('#main')); //jq两大优点支持联缀隐式迭代
var oPin=$('<div>').addClass('box').appendTo($(oBox));
var oimg= $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPin));//改变图像的 width 属性：

})
waterfall();
}
})
})

function waterfall(){
var $pin =$('#main>div') //只能用> 空格会将父元素底下所有的子元素都找到而>只找到mian底下的一级div//$('....').find('.level1 > li')
var w=$pin.eq(0).outerWidth(); //width()不包括内外边距
//整个界面的宽度每个div 的宽度
var cols=Math.floor($(window).width()/w);
//jq可在获取的同时就设置
$('#main').width(w*cols).css('margin','0 auto') //括号什么都不写就是获取写参数就是设置方法不需要单位
var hArr=[];
$pin.each(function(index,value){ //遍历的第一个所有元素的索引第二个事所有的元素
var h=$pin.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;//push 也可以
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr); //接受两个参数第一个是判断谁第二个是在哪判断获取索引
// 设置的元素存储于value 遍历时value就保存所有元素然这是一个dom对象 dom对象不能应用jq的任何样式的必须转换成jq对象
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=$pin.eq(index).outerHeight();

}
})
}
function checkScroll(){

var li=$('main>div').last();
var liH=li.offset().top+Math.floor(li.Height/2); //先调方法，在写其位置
var liuH=$(window).scrollTop();
var lH=$(window).height();
return(liH<liuH+lH?true:flase);
}