js水平布局瀑布流

Html

Css

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.content {
	overflow:hidden;
	width:1920px;
	margin:0 auto;
	border:1px solid red;
}
.long {
	width:3000px;
}
.box {
	float:left;
	/* height:300px;
	*/
            /* line-height:300px;
	*/
            text-align:center;
	background-color:pink;
	/* margin-bottom:10px;
	*/
            /* margin-right:10px;
	*/
}
/* 清除浮动 */

        .clearfix:after {
	visibility:hidden;
	clear:both;
	display:block;
	content:".";
	height:0
}
.clearfix {
	*zoom:1
}

images = [{
        height: 300,
        width: 4000
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 100,
        width: 500
    },
    {
        height: 200,
        width: 500
    },
    {
        height: 200,
        width: 100
    },
    {
        height: 400,
        width: 300
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 500,
        width: 400
    },
    {
        height: 200,
        width: 400
    },
    {
        height: 100,
        width: 400
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 200,
        width: 500
    },
    {
        height: 300,
        width: 1900
    },
    {
        height: 100,
        width: 500
    },
    {
        height: 200,
        width: 100
    },
    {
        height: 400,
        width: 300
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 500,
        width: 400
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 200,
        width: 400
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 100,
        width: 500
    },
    {
        height: 200,
        width: 500
    },
    {
        height: 100,
        width: 400
    },
    {
        height: 200,
        width: 100
    },
    {
        height: 400,
        width: 300
    },
    {
        height: 300,
        width: 400
    },
    {
        height: 500,
        width: 400
    },
    {
        height: 200,
        width: 400
    },
    {
        height: 100,
        width: 400
    },
    {
        height: 300,
        width: 400
    },
]

function filledImages(images, lineHeight, lineWidth, margin) {
    let i = index = 0
    let splitImg = []
    while (i < images.length && ++index) {
        let totalWidth = 0;
        let rotalRowWidth = 0
        let minPay = Number.MAX_VALUE
        let picNum = 0
        let rowImg = []
        for (let j = i; j < images.length; j++, picNum++) {
            const img = images[j];

let newWidth = lineHeight / img.height * img.width
            // console.log(newWidth);
            totalWidth += newWidth

// 计算损失宽度
            let pay = totalWidth - (lineWidth - margin * picNum)
            // console.log(totalWidth, pay);

// 添加这张图片之后 pay 的绝对值比 minPay 的绝对值大
            if (Math.abs(pay) > Math.abs(minPay)) break

// 更新最小损失宽度
            minPay = pay
            rotalRowWidth += newWidth
            rowImg.push({ ...img,
                height: lineHeight,
                width: newWidth
            })
        }
        i += picNum
        console.log(`第${index}行，宽度一共增加${-minPay}px，一行放${picNum}张`);

for (let k = 0; k < rowImg.length; k++) {
            // 根据比例修改 newWidth
            let ratioPag = -minPay * rowImg[k].width / rotalRowWidth
            rowImg[k].width = rowImg[k].width + ratioPag
        }
        splitImg.push(rowImg)
    }
    return splitImg
}

function createBox(img, margin) {
    let div = document.createElement('div')
    div.classList.add('box')
    div.style.width = img.width + 'px'
    div.style.height = img.height + 'px'
    div.style.lineHeight = img.height + 'px'
    div.style.marginRight = margin + 'px'
    div.style.marginBottom = margin + 'px'
    div.innerText = `height:${img.height} width:${img.width}`
    return div
}

const lineHeight = 350
const lineWidth = 1200
const margin = 6
let imgs = filledImages(images, lineHeight, lineWidth, margin)
console.log(imgs);

let content = document.querySelector('.content')
content.style.width = lineWidth + 'px'
for (let i = 0; i < imgs.length; i++) {
    let img = imgs[i]
    let row = document.createElement('div')
    row.classList.add('clearfix')
    row.classList.add('long')
    for (let j = 0; j < img.length; j++) {
        let box = createBox(img[j], margin)
        row.appendChild(box)
    }
    content.appendChild(row)
}

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

立即下载

js水平布局瀑布流



代码描述：使用原生js实现的水平布局瀑布流，效果类似500px官网，用户可以手动配置每行高度和总宽度

更新时间：2023-02-19 22:42:07

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

czt666

相关代码

js水平布局瀑布流

最新