js原生瀑布流

Html

Css

img {
	border:none;
	display:block
}
.container {
	width:1000px;
	margin:0 auto;
	position:relative;
}
.container .item {
	position:absolute;
	box-sizing:border-box;
}
.item img {
	width:240px;
	padding:3px;
	border:1px solid #eee;
	box-sizing:border-box;
	box-shadow:0 0 5px;
	border-radius:5px;
}
@media screen and (max-width:1200px) {
	.container {
	width:800px !important;
	margin:0 auto;
	position:relative;
}
}@media only screen and(min-width:1200px) and (max-width:1920px) {
	.container {
	width:1000px !important;
	margin:0 auto;
	position:relative;
}
}

//面向对象实现

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 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()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js原生瀑布流



代码描述：js原生瀑布流waterfall 面向对象实现，自适应瀑布流，能帮上你们，我也会很高兴的；帮不上，求别喷就行

注意：在上边的图片没法弄，大家可以下下来，写自己的数组数据图片如：[{src:'path'}]；还有就是显示的不是等高的，这是因为没有图片；
★★★实现了自适应在屏幕为1200-1920的时候，container为1000此时显示，此时会计算出显示4列
当屏幕为1200一下的时候，container为800，此时会计算显示出三列
调用方法：
var wf = new waterfall({ containerw: cw,//最外边容器的宽度如：1000 childw: itemw,//字容器的宽度如：240 childlist: items,//传入子容器的数组(就是先默认显示几个子容器) imglist: imglist//传入图片数据[{src:'path'}] }) wf.init()

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

秋风瑟瑟

相关代码

js原生瀑布流

最新