使用grid布局分配空间并实现懒加载

举个例子

//ul样式
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);//1fr 平分空间
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
//img 样式
.item-content>ul>li img {
    width: 100%;
    height: 100%;
 }
 //上面ul样式为li分配了空间 li又为img分配了空间
 //img标签
 <img data-original="http://www.luckymalltoday.com/${data[i].pimg}" src="./image/loading.svg" alt="">
 //js
 start();
var clock; //函数节流
$(window).on('scroll', function () {
    if (clock) {
        clearTimeout(clock);
    }
    clock = setTimeout(function () {
        start()
    }, 200)
})

function start() {
    $('img').not('[data-isLoading]').each(function () {
        if (isShow($(this))) {
            loadImg($(this));
        }
    })
}
function isShow($node) {
    return $node.offset().top <= $(window).height() + $(window).scrollTop();
}
function loadImg($img) {
    $img.attr('src', $img.attr('data-original'));
    $img.attr('data-isLoading', 1);
}