原生js实现瀑布流

Javascript实现瀑布流

• 下面是瀑布流的js实现过程，前提条件，后端返回的图片信息需携带图片的width和height，用于js计算图片位置，否则无法实现瀑布流，效果可以参考 Pngink
• 有点小依赖jquery，有能力将dom操作部分替换为原生的即可。
  

<div class="maindom">
	<div width="100" height="221" class="imgdom">
		<div>
	        <img src="" class="imgli-img" alt=""/>
	    </div>
	    <div class="info imgli-img-title" style="height: 25px">
	        <a href="/preview/`在这里插入代码片`" title="{$v.title}">标题</a>
	    </div>
	</div>
</div>

/*
 * @description: 
 * @Date: 2022-09-23 21:02:44
 * @LastEditTime: 2022-09-27 14:16:28
 */
let def_width =200;//默认图片宽度
let def_margin = 15;//默认边距
let h_arr = [];//记录每行总高度；
let clounm = 0;//生成的列数，无需修改动态计算
let imgdom = null;//图片的列表元素
let maindom = null;//承载图片列表的元素，用于获取该元素宽高实现动态计算列数

function init(main = false, imgs = false) {
    if (main != false) {
        maindom = main
    }
    if (imgs != false) {
        imgdom = imgs
    }

    let window_width = $(maindom).width();
    // 宽度
    if (window_width < 600) {
        def_width = 180
    }
    if (window_width < 400) {
        def_width = 130
    }
    h_arr = [];//记录每行总高度；
    clounm = Math.floor((window_width + def_margin) / (def_width + def_margin));//计算应该生成几行
    def_width = Math.floor(((window_width + def_margin) / clounm) - def_margin);//动态补充宽度
    for (i = 0; i < clounm; i++) {
        h_arr.push(0)
    }
    render()
}

//计算数组中最小的数字并且返回对应数组坐标
function min(arr) {
    const num = Math.min(...h_arr);
    const index = h_arr.indexOf(num)
    return index;
}

//根据数字计算左偏移位置；
function sum_left(index = 0) {
    return index * def_width + (index * def_margin);
}

//根据宽度和展示宽度计算倍率计算实际高度；
function sum_height(w, h) {
    const rota = w / def_width;
    return parseInt(h / Math.abs(rota));
}

function render() {
    const list = $(imgdom);
    for (const listElement of list) {
        let img = $(listElement);
        let index = min(h_arr);
        const left = sum_left(index);
        let height = parseInt(sum_height(img.attr('width'), img.attr('height')));
        img.css({
            position: 'absolute',
            width: def_width,
            height: height,
            opacity: 1,
            transform: `translateX(${left}px) translateY(${h_arr[index]}px)`,
        })
        let size = height + 15;

        if ($(img).find(".info").text() != "") {
            size += $(img).height();
        }//如果图片下面有标题，则获取标题的元素高度；
        h_arr[index] += size
        $(maindom).css({
            height: Math.max(...h_arr), opacity: 1
        })
    }
}
function debounce(fn, wait) {
    var timer = null;
    return function () {
        if (timer !== null) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
init("maindom","imgdom");//第一次调用请传递maindom和imgdom两个元素的class类名  当html标签渲染到dom后执行瀑布流；不需要等待图片加载出来；每次图片列表有变化需要重新调用此方法
window.addEventListener("resize", debounce(init, 100));//监听窗口变化，以便自适应