<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="screen"></div> <div id="images"> <img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png"> <img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png"> <img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png"> <img src="http://harunpehlivantebimtebitagem.4adim.com/files/6123/2017/09/09/create-thumb3.png"> </div>

html { overflow: hidden; touch-action: none; content-zooming: none; } body { margin:0; padding:0; background:#000; position:absolute; width:100%; height:100%; } #screen { position:absolute; width:100%; height:100%; } #screen .img{ position:absolute; cursor:pointer; width:100%; height:100%; user-select: none; } #screen .frame { position:absolute; width:50%; height:50%; } #images { display:none; }

window.addEventListener('load', function () { var src = document.getElementById("images").getElementsByTagName("img"), img = function img (el,x,y) { var d = document.createElement("div"); d.className = "frame"; d.style.left = 50 * x + "%"; d.style.top = 50 * y + "%"; var img = document.createElement("img"); img.className = "img"; img.src = src[Math.floor(Math.random()*src.length)].src; img.onmousedown = function () { div(this.parentNode); this.parentNode.removeChild(this); } d.appendChild(img); el.appendChild(d); }, div = function div (el) { img(el,0,0); img(el,1,0); img(el,0,1); img(el,1,1); }; div(document.getElementById("screen")); window.ondragstart = function() { return false; } }, false);