JSFiddle - React, Tailwind, and code Playground

by jim28791

HTML

<div id="cnt">
    <div class="b1" t="sub"></div>
    <div class="b2" t="sub"></div>
</div>
<div id="hd" style="display:none;">
    <div class="img"><img></div>
</div>

CSS

*{margin:0;padding:0;}
#cnt{width:100%;height:100%;background-color:#000;padding:0;margin:0;border:1px solid #000;}
#cnt > div[t="sub"]{width:48%;min-height:1000px;margin:0.5%;padding:0;border:0;display:inline-block;background-color:#fff;vertical-align:top;text-align:center;}
div[t="sub"] img{width:95%;margin:2px;border:1px solid #00f;}

JavaScript

var img_arr=[
'http://www.wall001.com/1280x1024/1280_1024_nature_scene_wallpapers_06/mxxx01/1280_1024_nature_wallpaper_3210710877.jpg',
'http://i.imgur.com/imF9J.jpg',
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRJ2CKMpSIqyaUbbGRKjOHYbUrKInv0b0455IDWYnHKuIdQDema',
'http://plog.tc.edu.tw/gallery/3193/%E9%A2%A8%E6%99%AF03.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4r55IMv9p3Gd7ZekqJ1vaQy0YycE2pKktV1DNgxao9Ov3OoWa'];

var gl={
    'init':function(){
        var hobj=$('#hd .img');
        for(var i=0;i<img_arr.length;i++){
            var t=hobj.find('img').attr('src',img_arr[i]).clone();
            if(i%2==0)t.appendTo($('#cnt .b1'));
            else t.appendTo($('#cnt .b2'));
        }
    }
}
$(document).ready(function(){
    gl.init();
});