前端开发图片的瀑布流布局

手机前端的开发

手机端前端开发

手机web前端开发案例

图片设置等宽，高度自适应，填充图片的数据是模拟的后台数据(请全屏预览)

html 代码

<!DOCTYPE html>

<html>

<head>

<title>瀑布流布局</title>

<!– <link rel=”stylesheet” type=”text/css” href=”css/style.css”/> –>

<style>

margin:0;

padding:0;

}

#main{

position:relative;

}

.box{

padding:15px0015px;

float:left;

}

.pic{

padding:10px;

border:1pxsolid#ccc;

border-radius:5px ;

box-shadow:005px#ccc;

}

.picimg{

width:365px;

height:auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

window.onload = function () {

waterfall(‘main’, ‘box’);

var dataInt = {

‘data’: [{ ‘src’: ‘133437jl189kfuzh2f7k4i.jpg’ },

{ ‘src’: ‘133436kmfmx5mxdq5522nz.jpg’ },

{ ‘src’: ‘133436ayjlzt0oyhn907cg.jpg’ },

{ ‘src’: ‘133435crrozr54rrye0zg5.jpg’ },

{ ‘src’: ‘133434wx8gkf8gkckqg6xg.jpg’ },

{ ‘src’: ‘133433i644dofbyvbyyfio.jpg’ },

{ ‘src’: ‘133432zrtbnbgbrbyfkmlg.jpg’ },

{ ‘src’: ‘133432fk5wffs2f5twfhws.jpg’ },

{ ‘src’: ‘133432rcc1n3nkccnichs8.jpg’ },

{ ‘src’: ‘133430ahdyyx9cxpccbhpc.jpg’ },

{ ‘src’: ‘133430qunng4ar4xqyd29y.jpg’ },

{ ‘src’: ‘133428oh2jbvq5n5duuqhn.jpg’ },

{ ‘src’: ‘133426s1j23im1bso0sbsm.jpg’ },

{ ‘src’: ‘133426y2blql21lq9tnb1l.jpg’ },

{ ‘src’: ‘133426v8r3v2033v7drxua.jpg’ },

{ ‘src’: ‘134228q0p928ugxbv7xxxx.jpg’ },

{ ‘src’: ‘133426hrc5y5awp1aywvla.jpg’ },

{ ‘src’: ‘133426aoib8bu1az8zhfk9.jpg’ }]

};

window.onscroll = function () {

if (checkscrollside()) {

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 = “http://cdn.attach.w3cfuns.com/notes/pics/201608/12/” + dataInt.data[i].src;

oPic.appendChild(oImg);

}

waterfall(‘main’, ‘box’);

}

// checkscrollside();

}

function waterfall(parent, box) {

//遍历所有的盒子

var oParent = document.getElementById(parent);

var oBox = getByClass(oParent, box);

// console.log(oBox.length);

//计算整个页面的列数

var oBoxW = oBox[0].offsetWidth;

// console.log(oBoxW);

var cols = Math.floor(document.documentElement.clientWidth / oBoxW);

// console.log(cols);

//设置main的宽度

oParent.style.cssText = ‘width: ‘ + oBoxW * cols + ‘px;margin: 0 auto’

var hArr = [];//存放每一行高度

for (var i = 0; i < oBox.length; i++) {

if (i < cols) {

hArr.push(oBox[i].offsetHeight);

// console.log(hArr);

} else {

var minH = Math.min.apply(null, hArr);

// console.log(minH);

var index = getminHIndex(hArr, minH);

// console.log(i);

oBox[i].style.position = ‘absolute’;

oBox[i].style.top = minH + ‘px’;

oBox[i].style.left = oBoxW * index + ‘px’;

hArr[index] += oBox[i].offsetHeight;

}

function getByClass(parent, classname) {

var boxArr = [],//存储所有class为box的元素

oElements = parent.getElementsByTagName(‘*’);

for (var i = 0; i < oElements.length; i++) {

if (oElements[i].className == classname) {

boxArr.push(oElements[i]);

}

return boxArr;

}

function getminHIndex(arr, val) {

for (var i in arr) {

if (arr[i] == val) {

return i;

}

function checkscrollside() {

var oParent = document.getElementById(‘main’);

var oBox = getByClass(oParent, ‘box’);

var lastBoxH = oBox[oBox.length – 1].offsetTop + Math.floor(oBox[oBox.length – 1].offsetHeight / 5);

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

// console.log(scrollTop);

var height = document.body.clientHeight || document.documentElement.clientHeight;

return (lastBoxH < scrollTop + height) ? true : false;

}

</script>

</body>

</html>

手机客户端前端开发

前端开发兼容华为手机类型

前端手机端开发曲屏

前端开发图片的瀑布流布局

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发