js/jQuery实现瀑布流
2020-02-16 本文已影响0人
4VZhang
html中主要代码:
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="imgs/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/1.jpg">
</div>
</div>
<!--引入js-->
<script src="js/index.js" type="application/javascript"></script>
</body>
实现瀑布流的js代码:
function waterFall(parent,box) {
// 屏幕宽度
var screenWidth = document.body.offsetWidth;
// 获取所有的box
var allBox = $('main').getElementsByClassName('box');
// 单个box的宽度
var boxWidth = allBox[0].offsetWidth;
// 计算能容纳下几列
var colum = Math.floor(screenWidth / boxWidth);
$(parent).style.width = colum * boxWidth + 'px';
$(parent).style.margin = '0 auto';
// 初始化数组,储存每一列的高度
var heightArr = [];
for (var i=0; i<allBox.length;i++) {
// 储存第一行的高度
if (i < colum) {
heightArr.push(allBox[i].offsetHeight);
}else {// 获取数组中高度最小的,增加;
var min = Math.min.apply(this,heightArr);
var minIdx = indexForArr(heightArr,min);
// console.log(heightArr);
// console.log(minIdx+'----'+ min);
// 布局当前box的
allBox[i].style.position = 'absolute';// 绝对布局
allBox[i].style.left = boxWidth * minIdx + 'px';
allBox[i].style.top = min + 'px';
// console.log(boxWidth*minIdx+'px');
// console.log(min +'px');
// 更新数组中当前索引值对应的value
heightArr[minIdx] += allBox[i].offsetHeight;
}
}
}
css实现瀑布流只需要三行代码:
/*css,多栏布局 达到瀑布流的效果!!!*/
-webkit-column-width: 202px;
column-width: 202px;
-moz-column-width: 202px;
实现下拉刷新的js代码:
window.onscroll = function () {
if (checkLoadMore()){
var datas = {'dataimg':[{'img':'1.jpg'},{'img':'1.jpg'},
{'img':'18.jpg'},{'img':'16.jpg'},
{'img':'17.jpg'},{'img':'19.jpg'},
{'img':'20.jpg'},{'img':'22.jpg'}]};
for (var i = 0 ; i < datas.dataimg.length;i++) {
var newbox = document.createElement('div');
newbox.className = 'box';
$('main').appendChild(newbox);
var newpic = document.createElement('div');
newpic.className = 'pic';
newbox.appendChild(newpic);
var newImg = document.createElement('img');
newImg.src = 'imgs/'+ datas.dataimg[i].img;
newpic.appendChild(newImg);
}
waterFall('main','box');
}
