$(document).width() height() 获取内容的宽高 $(window).width() height() 浏览器的宽高 //相当于可以document.documentElement.clientHeight $(obj).width() height() 要获得的对象宽高 还有一种 $(obj).width() 普通宽 <innerwidth() 包括padding <outerwidth() padding+border < outerwidth(true) padding+border+margin $(“#img1”).offset().left $(“#img1”).offset().top 到上左的距离 $(document).scrollTop() $(document).scrollLeft() 获取滚动的距离 使用window和document一样 e.pageX e.pageY 鼠标的坐标
项目原码地址：https://github.com/SummerXll123/js-jq-demo/blob/master/js-jq%E7%80%91%E5%B8%83%E6%B5%81.html
瀑布流特点：等宽不等高，瀑布流的效果，页面都是由很多数据块(这里将数据块分成多列)组成，每个数据块的高度不等，
思路
1、首先获取每列的高度,保存在一个数组中，然后求数组中最小项的值
2、(滚动条下拉)判断什么时候再次请求数据
当浏览器 视口高度+scrollTop 大于等于 最小列的底部位置时，再次请求数据
3.循环处理数据,每插入一个数据块，需要更新min_h,这样每次插入都是最先插入到高度最小列中
当浏览器 视口高度+scrollTop 大于等于 最小列的底部位置时，再次请求数据
列数=浏览器窗口宽度/图片宽度，图片定位是根据每一列数据库的高度进行定位
图片排序是按照计算的位置横向排列，位置是计算出来的，比较规范。
<div id="main">
<div class="pin">
<div class="box">
<img src="images2/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="images2/21.jpg"/>
</div>
</div>
</div>
css
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 14px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
</style>
js
<script>
/*
*
注意：如果出现重叠问题，看看是不是padding的问题
瀑布流实现：
1求出列数，将每列的高度存放在一个数组内；
2遍历数组，求出高度最小的图片；
3将下一个图片放在min下
4修改图片的当前高度；*/
window.onload=function(){
//封装一个函数
waterFall('main','box')
var dataInt={"data":[{"src":"5.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
//滚动
window.onscroll=function(){
if(checkScrollSlide){
var oParent=document.getElementById('main')
//将数据块渲染到当前页面的尾部
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement('div')
oBox.className='box'
oParent.appendChild(oBox)
var oPic=document.createElement('div')
oPic.className='pic'
oBox.appendChild(oPic)
var oImg=document.createElement('img')
oImg.src="images/"+dataInt.data[i].src;
oPic.appendChild(oImg)
}
waterFall('main','box')
}
}
}
function waterFall(parent,box){
//将main下面所有class为box的元素取出来
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box)
console.log(oBoxs.length)
//计算整个页面显示的列数（页面宽/box的宽）
var oBoxW=oBoxs[0].offsetWidth;//获取第一个元素的宽度
var cols=Math.floor(document.documentElement.clientWidth/oBoxW)
//设置main的宽,oParent.style.cssText,#main一开始沒有设置宽度, 浏览器大小有变化, #main也就会跟着变化, 而列数就会变化, 所以要给#main设置固定
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'
//存放每一列的数组
// 第二步，找第一行的高度值，高度值存放进数组，找出高度最小的图片,然后，每一行存放的是每一列的值
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){//怎么获取第一行的高度？只要i小于列数（cols）就可以了
hArr.push(oBoxs[i].offsetHeight)
}else{
var minH=Math.min.apply(null,hArr)//Math.min(）求最小值，但是只能是一组数据，Math.min(45,4,1),不能对数组取最小值，用apply改变this指向
//获取最小值的索引
var index=getMinhIndex(hArr,minH)
console.log(minH)
oBoxs[i].style.position='absolute'
oBoxs[i].style.top=minH+'px'
// oBoxs[i].style.left=oBoxW*index+'px'
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px'
//解决重叠问题，新的高度=原来 最小值得高度=新的图片高度+原来的高度
hArr[index]+=oBoxs[i].offsetHeight
}
}
console.log(hArr)
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有class为box的元素
oElements=parent.getElementsByTagName('*')
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
//获取最小值的索引
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i
}
}
}
//检测是否具备记载数据块的条件
function checkScrollSlide(){
var oParent=document.getElementById('main')
var oBoxs=getByClass(oParent,'box')
//获取最后一个图片发高度
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetTop/2)
//滚走的距离,兼容混杂模式和标准模式
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
var height=document.body.clientHeight||document.documentElement.clientHeight
// console.log(scrollTop)
console.log(height)
return(lastBoxH<scrollTop+height?true:false)
}
function getClassName(className,parent){
var oParent=parent?document.getElementById(parent):document
var oChild=oParent.getElementsByTagName('*')//获取所有的标签元素
var arr=[]
for(i in oChild){
//判断遍历的元素的类名是否和要查找的类名相等
if(oChild[i].className==className){
arr.push(oChild[i])
}
}
return arr
}
</script>
jq
<script> $(window).on('load',function(){ waterfall() var dataInt={"data":[{"src":"5.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]} $(window).scroll(function(){ //判断是否具备加载条件 if(checkScrollSlide()){ $.each(dataInt.data,function(index,value){ console.log() $('#main').append(`<div class="pin"><div class="box"><img src='images2/${dataInt.data[index].src}'></div></div>`) }) waterfall() } }) }) function waterfall(){ var $boxs=$('#main .pin') var w=$boxs.eq(0).outerWidth()//小div的宽度 var cols=Math.floor($(window).width()/w) //求列数 var mainW=$('#main').width(cols*w); //大div的宽度 //设置空数组，盛放第一行所有的列数 var arr=[] $.each($boxs,function(index,value){ // var h=$boxs.eq(index).outerHeight() //获取第几个的高度 // arr[index]=h; //arr数组索引值对应的内容是h //获取第一行所有的列数的高度值，并取最小值和最小值的索引 if(index<cols){ //后边的图片放到高度最小的图片下面 arr[index]=$boxs.eq(index).outerHeight() //对第一行的元素进行遍历，获取高度放在arr里面 }else{ //对第一行所有的列数进行遍历，取最小值 var minH=Math.min.apply(null,arr) //记住是apply,apply只对数组操作 var minHIndex= $.inArray(minH,arr) //获取最小高度在数组中的索引 //设置第一行以后的元素的位置，第八张图片定位到第一行最小高度的下面，top为最小高度值 $(value).css({ //value加$()是为了转成jq对象，使用jq方法 'position':'absolute', 'top':minH+'px', 'left':minHIndex*w+'px' }) //arr盛放每一行的列数， arr[minHIndex]+=$boxs.eq(index).outerHeight() //第7张图片以后，每个图片的位置是：上一行的最小高度+当前的高度 } }) } //滚动时候是否加载 function checkScrollSlide(){ var lastH=$('#main :last') //最后一个图片 var lastHeight=Math.floor(lastH.outerHeight()/2)+lastH.offset().top //最后一个图片高度的一半加上相对于文档的偏移量 var documentH=$(window).height() // var scrollTop=$(window).scrollTop() //获取滚动的距离 //最后一张图片高度的一半和它自身的偏移量<浏览器滚动高度+浏览器的高度，才会继续加载 return (lastHeight<scrollTop+documentH)?true:false } </script>
浙公网安备 33010602011771号