瀑布流-白红宇

瀑布流

阅读量：4932 次

发布时间：2019-06-11

本文共 5154 字，大约阅读时间需要 17 分钟。

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

.box {

float: left;

border: 1px solid #ccc;

padding: 5px;

}

</style>

//第一行图片不用计算自然摆放即可

//后面的要通过JS去摆放

//找到高度最短的这一列去追加

window.οnlοad=function(){

//计算列数

var container=document.getElementById("container");

var boxes=container.children;

var pageWidth=window.innerWidth;

var boxWidth=boxes[0].offsetWidth;

var column=Math.floor(pageWidth/boxWidth);

console.log(column);

//找最小列

var arrHeight=[];

function waterfall(){

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

if (i<column){

arrHeight[i]=boxes[i].offsetHeight;

}else {

var minHeight=getMin(arrHeight).value;

var minHeightIndex=getMin(arrHeight).index;

boxes[i].style.position="absolute";

boxes[i].style.left=boxes[minHeightIndex].offsetLeft+"px";

boxes[i].style.top=minHeight+"px";

arrHeight[minHeightIndex]=minHeight+boxes[i].offsetHeight;

}

waterfall();

var minHeight=getMin(arrHeight).value;

var minHeightIndex=getMin(arrHeight).index;

console.log(arrHeight);

console.log(minHeight);

console.log(minHeightIndex);

//判断触底

window.οnscrοll=function(){

if (bottomed()){

var json = [

{"src": "images/P_000.jpg"},

{"src": "images/P_001.jpg"},

{"src": "images/P_002.jpg"},

{"src": "images/P_003.jpg"},

{"src": "images/P_004.jpg"},

{"src": "images/P_005.jpg"},

{"src": "images/P_006.jpg"},

{"src": "images/P_007.jpg"},

{"src": "images/P_008.jpg"},

{"src": "images/P_009.jpg"}

]

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

var div=document.createElement("div");

div.className="box";

container.appendChild(div);

var img=document.createElement("img");

img.src=json[i].src;

div.appendChild(img);

}

waterfall();

}

function bottomed(){

var clientHeight=window.innerHeight;

var scrollTop=window.pageYOffset;

var lastBoxTop=boxes[boxes.length-1].offsetTop;

if (clientHeight+scrollTop>lastBoxTop){

return true;

}

function getMin(arr){

var min={};

min.index=0;

min.value=arr[min.index];

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

if (arr[i]<min.value){

min.value=arr[i];

min.index=i;

}

return min;

}

</script>

</head>

<body>

</div>

<!--<script>

//入口函数

/*window.οnlοad=function(){

var container=document.getElementById("container");

var boxes=container.children;

var pageWidth=window.innerWidth;

var boxWidth=boxes[0].offsetWidth;

var column=Math.floor(pageWidth/boxWidth);

console.log(column);

}*/

//获取最小值

/*function getMin(arr){

var min={};

min.index=0;

min.value=arr[min.index];

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

if (arr[i]<min.value){

min.value=arr[i];

min.index=i;

}

return min;

}*/

/* var arr=[1,2,3,4,5];

console.log(getMin(arr).value);

console.log(getMin(arr).index);*/

</script>-->

</body>

</html>

转载于:https://www.cnblogs.com/gxw123/p/7047519.html

你可能感兴趣的文章

bzoj 4237稻草人

查看>>

在发送intent启动activity之前判断是否有activity接收

《第一行代码》学习笔记7－活动Activity（5）

查看>>

ngx_http_core_module 模块

查看>>

两个常见的oracle索引

查看>>

一位有着工匠精神的博主写的关于IEnumerable接口的详细解析

查看>>

MySQL中特有的函数If函数

查看>>

安装Python3.6.2报错：zipimport.ZipImportError: can't decompress data; zlib not available

查看>>

【蓝桥杯】入门训练 Fibonacci数列

[python]pickle和cPickle

自定义RatingBar的一个问题（只显示显示一个星星）

查看>>