参考文章 https://segmentfault.com/a/1190000012621936
关于适配问题
之前大分辨率的手机两个图片之间的纵向高度会特别高，然后我刚开始是采用判断分辨率，大分辨率的采用rem，正常的用px，因为我发现正常的也用px算的话，有时候就会乱掉。
后来发现，我把一个数据写死了，就是图片显示在手机上的px，刚开始用的数据是178，这是在iphone6下的数据，但是在大屏幕下，宽度是会改变的，所以就会导致大屏幕下间隙不一致。
另外，当你的图片是通过AJAX请求返回的话，需要在URL中有图片的宽高
<style type="text/css">
body,.box{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
}
.item{
position: absolute;
width: 48%;
height: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
<div class="box" id="box">
<div class="item"><img src="images/4.png"></div>
<div class="item"><img src="images/2018.png"></div>
<div class="item"><img src="images/4.png"></div>
<div class="item"><img src="images/2018.png"></div>
</div>
<script>
<!--瀑布流-->
var box = document.getElementById('box');
let items = box.children;
var gap=10 //间隔
var arr=[]
//特别坑的地方，一定要等图片加载完成之后，执行waterFall，否则无法获取高度
window.onload=function(){
waterFall()
}
function waterFall() {
// 确定列数
var pageWidth=document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth
var eleWidth=document.querySelector(".item").offsetWidth
var col=Math.floor(pageWidth/eleWidth)
for(var i=0;i <items.length;i++){
if(i<col){
//第一行
items[i].style.top=gap+'px'
items[i].style.left=gap+i*eleWidth+'px'
arr.push(items[i].offsetHeight+gap)
}else{
//其他行
var minHeight=arr[0]
var index=0
//获取最小高度及下标
for(var j=0;j<arr.length;j++){
if(arr[j]<minHeight) {
minHeight=arr[j]
index=j
}
}
items[i].style.top=minHeight+'px'
items[i].style.left=items[index].offsetLeft + 'px';
arr[index]=arr[index]+items[i].offsetHeight
}
}
}
</script>
不知道为什么，我这里使用的滚动加载，但是在真机上，手指稍微一动，就会发出所有请求，这是个bug
var box = document.getElementById('box');
var items = box.children;
var timer=null
var gap = 10; // 定义每一列之间的间隙 为10像素
//滚动加载
var perPage = 20;
var maxPage,count;
var index=1;
var arrHeight=[]
window.onload=function () {
var box = document.getElementById('box');
var items = box.children;
appendHtml(index)
}
function waterFall(arrHeight) {
// 1- 确定列数 = 页面的宽度 / 图片的宽度
var columns=2
var arr = [];
for (var i = 0; i < items.length; i++) {
var divHeight=items[i].childNodes[1].clientHeight
if (i < columns) {
// 2- 确定第一行
items[i].style.top ='0.2rem';
items[i].style.left = i%2==0? '2.7%' : '51.3%';
arr.push(arrHeight[i]+divHeight+10+20);
} else {
// 其他行
// 3- 找到数组中最小高度 和 它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 4- 设置下一行的第一个盒子位置
// top值就是最小列的高度 + gap
items[i].style.top = parseInt(arr[index]) + 'px';
// left值就是最小列距离左边的距离
items[i].style.left = index%2==0? '2.7%' : '51.3%';
// 5- 修改最小列的高度
// 最小列的高度 = 当前自己的高度 + 拼接过来的图片高度 + div文字高度
arr[index] = arr[index] + arrHeight[i]+divHeight+20;
}
}
}
function onScroll(){
var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
var h = totalheight + 100 - parseFloat($(document).height());
if(!timer){
timer=setTimeout(()=>{
clearTimeout(timer)
timer=null
if(h >= 0) {
index++;
appendHtml(index);
}
},700)
}
}
$(window).bind('scroll',function(){
onScroll();
})
function appendHtml(index){
if(index>maxPage){
return
}
$.ajax({
type: "get",
url: "//${haodianDomain}/api/shop/albums",
data:{page:index,bid:'${bid}',perPage:perPage},
dataType:"json",
headers: {
Charset: "utf-8"
},
success: function(data){
maxPage=data.maxPage
count=data.count
var res=data.items
if(res){
var chtml="",shareDesc=''
for(var i=0;i<res.length;i++){
var imgUrl=res[i].img
//获取原图宽高
var regExp=/_(\d*)x(\d*)-/
var imgWidth=parseInt(regExp.exec(imgUrl)[1])
var imgHeight=parseInt(regExp.exec(imgUrl)[2])
var ratio=parseInt(window.screen.width*0.46)
//计算显示出来的高度
var realHeight=parseInt(ratio*parseInt(imgHeight)/parseInt(imgWidth))
chtml+=' <div class="item">' +'<a <#if isApp?? && isApp>ttname="app_fwqlist_anli_list_${bid}_'+res[i].id+'"<#else>ttname="wap_fwqlist_anli_list_${bid}_'+res[i].id+'"</#if> href="'+res[i].link+'">'+ '<img src="'+imgUrl+'">'+'</a>' + '<div>'+ res[i].name + '</div></div>'
arrHeight.push(realHeight)
}
$("#box").append(chtml)
waterFall(arrHeight)
}
$("#box").find(".item").last().css("marginBottom","1.3rem")
if($("#box").find(".item").length>=count || count<=perPage || data.currentPage>=maxPage){
$("#no-more").show();
}
}
})
}
// clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
// scrollTop兼容性处理
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
网友评论