jq js css3 实现瀑布流

 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样式:


<style type="text/css">



    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .pin{
        padding: 15px 0 0 15px;
        float:left;
/*border:1px solid #333;*/
    }
    .box{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }
</style>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
</div>
</body>
</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);
}

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 、4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、下载 4使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、 4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.m或d论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值