c语言switch瀑布流,js原生瀑布流

//面向对象实现

function WaterFall(obj) {

this.containerW = obj.containerW || 800;

this.childW = obj.childW || 192;

this.childList = obj.childList;

this.imglist = obj.imglist

//3、计算出colum列

this.colum = parseInt(this.containerW / this.childW)

//4、计算出空隙

this.space = (this.containerW - this.colum * this.childW) / (this.colum - 1)

this.heightArr = [];

}

WaterFall.prototype.init = function() {

this.setDefault();

this.loadMore()

//下面的是为了判断当 cssMedia Screen设置窗口改变的时候重新设置container的宽度，从而重新传入container的width

window.onresize = function() {

switch ($('.container').width()) {

case 800:

var WF = new WaterFall({

containerW: 800,

childW: itemW,

childList: items,

imglist: imglist

})

WF.init()

break;

case 1000:

var WF = new WaterFall({

containerW: 1000,

childW: itemW,

childList: items,

imglist: imglist

})

WF.init()

break;

}

}

}

WaterFall.prototype.setDefault = function() {

console.log(2, this.colum, this.space)

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

if (i < this.colum) {

this.childList[i].style.left = (this.childW + this.space) * i + 'px';

//重新更新数组中的高度

this.heightArr[i] = this.childList[i].offsetHeight;

} else {

this.childList[i].style.left = (this.childW + this.space) * getMin(this.heightArr).minIndex + 'px';

this.childList[i].style.top = getMin(this.heightArr).minHeight + this.space + 'px';

this.heightArr[getMin(this.heightArr).minIndex] = getMin(this.heightArr).minHeight + this.space + this.childList[i].offsetHeight;

}

}

}

WaterFall.prototype.loadMore = function() {

var that = this;

console.log(that)

window.onscroll = function() {

// pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

// pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

// 这些属性是只读的。

// console.log(window.pageYOffset, window.innerHeight, window.pageYOffset + window.innerHeight, getMin(heightArr).minHeight)

if (window.pageYOffset + window.innerHeight > getMin(that.heightArr).minHeight) {

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

createItem(that.imglist[i].src)

}

that.setDefault();

}

}

function createItem(src) {

var divItem = document.createElement('div')

divItem.className = 'item'

var img = document.createElement('img')

img.src = src

divItem.append(img)

container.append(divItem)

}

}

//定义获取数组中最小值目的是：当前四列中的最小高度值，以及索引

function getMin(arr) {

var obj = {};

obj.minHeight = arr[0];

obj.minIndex = 0;

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

if (obj.minHeight > arr[i]) {

obj.minHeight = arr[i]

obj.minIndex = i;

}

}

return obj;

}

//开始定义需要传入构造函数的变量

// 获取最外边container的宽度

var container = document.getElementsByClassName('container')[0];

var CW = container.OffsetWidth

// 获取每一个item的宽度

var items = document.getElementsByClassName('item');

var itemW = items[0].offsetWidth;

console.log(CW, itemW)

var imglist = [{

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}, {

src: 'http://www.jq22.com/img/cs/500x300-1.png'

}]

var WF = new WaterFall({

containerW: CW,

childW: itemW,

childList: items,

imglist: imglist

})

WF.init()