JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div id="container">
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_000.jpg" /><p>00</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_001.jpg" /><p>01</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_002.jpg" /><p>02</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_003.jpg" /><p>03</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_004.jpg" /><p>04</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_005.jpg" /><p>05</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_006.jpg" /><p>06</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_007.jpg" /><p>07</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_008.jpg" /><p>08</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_009.jpg" /><p>09</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_010.jpg" /><p>10</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_011.jpg" /><p>11</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_012.jpg" /><p>12</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_013.jpg" /><p>13</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_014.jpg" /><p>14</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_015.jpg" /><p>15</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_016.jpg" /><p>16</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_017.jpg" /><p>17</p></div>
		<div class="cell"><img src="http://yl.sofedu.com/Public/images/images/p_018.jpg" /><p>18</p></div>
		<div class="cell"><img...

CSS

body,div{ margin:0; padding:0}
		img{ border:0}
		#container{text-align:center;}
		#container .cell{ padding:5px 5px 0; border:1px solid #E3E3E3; background:#F5F5F5; margin-top:10px}
		#container p{ line-height:20px; margin-top:5px}

JavaScript

/**
 * JS瀑布流布局
 * @ver 1.0
 * @param {options,callback} 对象配置项 回调
 **/
 
 function WaterFall(options,callback) {
	var self = this;
	self.options = $.extend({},defaults,options || {});
	this.cache = {
		$columns   : 0,   // 所有的列
		loadIndex  : 0    // 加载的次数
	};
	self.callback = callback;
	this._init();
 }
 $.extend(WaterFall.prototype,{
	
	/*
	 * 代码初始化 {创建列操作 对已存在的元素排序 窗口缩放或滚动事件}
	 * @method _init {private}
	 */
	_init: function(){
		var self = this,
			cache = self.cache;
		var cfg = self.options;
		if(cfg.container == '') {return;}
		cache.$columns = self._createColumn();

		//重排已存在元素时强制不渐显
		self.render($(cfg.container).find(cfg.cellCls),false);
		
		var scrollTime,
			resizeTime;

		$(window).unbind('scroll').bind('scroll',function(){
			scrollTime && clearTimeout(scrollTime);
			scrollTime = setTimeout(function(){
				self._onScroll();
			},100);
		});

		$(window).unbind('resize').bind('resize',function(){
			resizeTime && clearTimeout(resizeTime);
			resizeTime = setTimeout(function(){
				self._onResize();
			},100);
		});
	},
	/*
	 * 创建列
	 * @method _createColumn {private}
	 */
	_createColumn: function(){
		var self = this,
			cfg = self.options;
		var columnLen = self._calculateColumns();
		var html = "";
		for(var i = 0; i < columnLen; i++) {
			html+= '<div class="'+cfg.columnClassName+'" style="width:'+cfg.columnWidth+'px;display:inline-block;vertical-align:top;*display:inline;zoom:1;margin-left:'+cfg.columnSpace/2+'px;margin-right:'+cfg.columnSpace/2+'px;overflow:hidden"></div>'
		}
		$(cfg.container).prepend(html);
		return $('.'+cfg.columnClassName,cfg.container);//列集合
	},
	/*
	 * 共有多少列
	 * 计算方法： maxCol = Math.floor(屏幕可见区域的宽度或者父容器的宽度/(格子宽度+间距));
	 * @method _calculateColumns {private}
	 */
	_calculateColumns: function(){
		var self = this,
			cfg = self.options;
		var num = Math.floor($(cfg.container).outerWidth()/(cfg.columnWidth *1 + cfg.columnSpace*1));
		if(num < 1){num = 1;}
		return num;
	},
	/*
	 * 渲染内容
	 * @param {elements flag} 所有.cell类元素 ...