Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <header>
    <a href="#" class="add-element">Hozzáad</a> |
    <a href="#">Alapértelmezett</a> |
    <a href="#">Közepes</a> |
    <a href="#">Nagy</a> |
    <a href="#">Képátméretezés animálása</a>
  </header>
  
  <section id="container">
    
  </section>
</body>
</html>
 
#container{
  width: 600px;
  
  position:relative;
  
}
#container article{    
  position:absolute;
  top:0;
  left:0;
  
  transition: -webkit-transform .5s;
  
  /* Úgy tűnik, hogy gyorsít valamennyit az átméretezésen */
  overflow: auto;
​
  /*
  transition-property: -webkit-transform, transform;
  transition-duration: .5s, .5s;
  */
}
​
  #container article.default{
    width:194px;
    height:151px;
  }
​
  #container article.medium{
    width:296px;
    height:280px;
  }
​
  #container article.large{
    width:600px;
    height:383px;
  }
​
  #container article img{
    max-width: 100%;
  
    /* Ha ki van kapcsolva magán a képen a transform, amit örökölne, akkor még gyorsabbnak tűnik */
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
  }
​
/*#container article:nth-child(1){
 transform: translate3d(0, 0%, 0);
}
​
#container article:nth-child(2){
 transform: translate3d(100%, 0, 0);
}*/
 
// Sablon
var elementTemplate = '<article class="default"><img src="http://lorempixel.com/600/343" /><p>Lorem ipsum</p></article>';
​
// Elemszélesség
var elementWidth = 194;
// Elemmagasság
var elementHeight = 151;
​
// Container
var $container = $('#container');
​
// Elemek
//var $elements = $container.find('article');
​
// Soronként elemszám
var elementsPerRow;
​
//console.log(elementsPerRow);
​
// Sor mutató
var currentRow;
​
// Oszlop mutató
var currentColumn = 0;
​
// X kiszámolása
var calX = function(element, index){
  var x = currentColumn * elementWidth;
  
  //console.log(index + ' - ' + x);
  
  if((currentColumn + 1) < elementsPerRow){    
    currentColumn++;
  }
  else{
    currentColumn = 0;
    currentRow++;    
  }
  
  return x;
};
​
// Y kiszámolása
var calY = function(element, index){
  var y = currentRow * elementHeight;
  
  //console.log(index + ' - ' + y);
  
  return y;
};
​
// Újrapozicionálás
var reposition = function(){
  currentRow = 0;
  currentColumn = 0;
  
  var x = 0,
      y = 0,
      z = 0;
  
  $container.find('article').each(function(index){
    //console.log(index);
    
    y = calY($(this), index);
    x = calX($(this), index);
    
    $(this).css('transform', 'translate3d(' + x + 'px, ' + y + 'px, ' + z + ')');
  });
};
​
// Inicializálás
var init = function(){
  elementsPerRow = parseInt($container.width() / elementWidth, 10);
  
  currentRow = 0;
  currentColumn = 0;
  
  reposition();
};
​
init();
​
// Elem beszúrás
$('.add-element').click(function(e){
  e.preventDefault();
  
  $container.prepend(elementTemplate);
  
  reposition();
});
​
// Méretváltás - alapértelmezett méret
$('header a:nth-child(2)').click(function(e){
  e.preventDefault();
  
  elementWidth = 194;
  elementHeight = 151;
  $container.find('article').removeClass('medium large').addClass('default');
  
  init();
});
​
// Méretváltás - közepes méret
$('header a:nth-child(3)').click(function(e){
  e.preventDefault();
  
  elementWidth = 296;
  elementHeight = 280;
  $container.find('article').removeClass('default large').addClass('medium');
  
  init();
});
​
// Méretváltás - nagy méret
$('header a:nth-child(4)').click(function(e){
  e.preventDefault();
  
  elementWidth = 600;
  elementHeight = 383;
  $container.find('article').removeClass('default medium').addClass('large');
  $container.find('article').find('img').addClass('large');
  
  init();
});
​
$('header a:nth-child(5)').click(function(e){
  e.preventDefault();
​
  $container.find('article').css('transition', 'all 0.5s');
});
​
//'<article style="transform: translate3d(0, ' + elementCount * 100  + '%, 0)"><img src="http://lorempixel.com/100/100" />   <p>Lorem ipsum</p></article>'
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
orionstarpro
0viewers