JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="get-latest-update">
    <a href="javascript:;">获取最近更新</a>
</h1>

<div class="img-items"></div>

<script type="text/template" id="img-item-tpl">
	<div class="img-item" style="flex-grow: {{width}}; width: {{width}}px;">
		<a href="#/img/{{id}}" style="padding-top: {{paddingTop}}%;">
        	<img data-src="{{src}}" src="{{src}}" width="100%" height="100%">
        </a>
    </div>
</script>

SCSS

body {
    background-color: #f2f2f2;
}

.get-latest-update {
    font-size: 20px;
    cursor: pointer;
    
    > a {
        color: #0183fd;
        text-decoration: none;
    }
}

.img-items {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.img-item {
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    
    > a {
        position: relative;
        display: block;
        width: 100%;
    }
    
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

JavaScript

// 事件绑定
function addEvent(elem, type, handler) {
    elem.addEventListener(type, handler, false);
}

function qs(selector) {
    return document.querySelector(selector);
}

function qsa(selectors) {
    return document.querySelectorAll(selectors);
}

// 函数节流，频繁操作中间隔 delay 的时间才处理一次
function throttle(fn, delay) {
    delay = delay || 200;

    var timer = null;
    // 每次滚动初始的标识
    var timestamp = 0;

    return function () {
        var arg = arguments;
        var now = Date.now();

        // 设置开始时间
        if (timestamp === 0) {
            timestamp = now;
        }

        clearTimeout(timer);
        timer = null;

        // 已经到了delay的一段时间，进行处理
        if (now - timestamp >= delay) {
            fn.apply(this, arg);
            timestamp = now;
        }
        // 添加定时器，确保最后一次的操作也能处理
        else {
            timer = setTimeout(function () {
                fn.apply(this, arg);
                // 恢复标识
                timestamp = 0;
            }, delay);
        }
    }
}

// 获取随机数
function getRandom(min, max) {
	return Math.round(Math.random() * (max - min + 1) + min);
}

// 构造图片数据
function createMockImgs(num) {
	var imgs = [];
    
    // 图片宽高数据范围
    var width = {
    	min: 50,
        max: 200
    };
    
    var height = {
    	min: 150,
        max: 300
    };
    
    // 图片源
    var imgSrcBase = [
        'http://www.deskcar.com/desktop/movietv/2009/2009227225145/',
        'http://www.deskcar.com/desktop/fengjing/2017418153624/',
        'http://www.deskcar.com/desktop/fengjing/2017418153624/',
        'http://www.deskcar.com/desktop/fengjing/2017418153624/',
        'http://www.deskcar.com/desktop/fengjing/2017418153624/',
        'http://www.deskcar.com/desktop/else/20161228125639/',
        'http://www.deskcar.com/desktop/fengjing/2017418153446/'
    ];
    
    // 图片预定义的高度
    var baseHeight = 200;
    
    for (var i = 1; i <= num; ++i) {
    	var w = getRandom(width.min, width.max);
        var h = getRandom(height.min, height.max);
       ...