javascript - 构建流畅的马赛克网格

我正在尝试构建一个流畅的马赛克网格。我使用了流畅这个词，因为我已经有了一个可用的马赛克网格。你可以查看我为这个问题特意制作的 fiddle :https://jsfiddle.net/a995w8ye/

我的 HTML 是:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Teste</title>
        <link rel="stylesheet" href="style.css">
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="divContainer">
            <div id="1" class="cube">
            </div>
            <div id="2" class="cube">
            </div>
            <div id="3" class="cube">
            </div>
            <div id="4" class="cube">
            </div>
            <div id="5" class="cube">
            </div>
            <div id="6" class="cube">
            </div>
            <div id="7" class="cube">
            </div>
            <div id="8" class="cube">
            </div>
            <div id="9" class="cube">
            </div>
            </div> <!-- End of div container -->
        </body>
    </html>

CSS:

#divContainer {
    width: 1000px;
    height: 800px;
    border: 1px solid black;
}

.cube {
    position:  relative;
float: left;
width: calc(1000px/3);
height: calc(800px/3);
cursor: pointer;
}

.cube.fullscreen{
    z-index: 9; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    background-color: #131313; 
}

.cube:hover {
    opacity: 0.75;
}

JS:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function fillColors(){
    for (var i = 1; i<=9; i++)
    {
        document.getElementById(i).style.background = getRandomColor();
    }
}

window.onload=function(){

fillColors();

$('.cube').on('click', function() {

    $(this).addClass('fullscreen');
    $('.cube').each(function(){
        if($(this).hasClass('fullscreen'))
        {
            return true;
        }
        $(this).hide();
    })
})
}

如果每个立方体是主 div 的 1/3，则宽度和高度。它们是 float 的，并且它们具有相对位置。我需要一个相对位置，因为实际情况下的“divContainer”没有固定大小，在这种情况下，由于所有立方体恰好有它的 1/3(宽度和高度)，它们将形成一个完美的网格，可以是3x3 甚至 1x9。

当用户单击一个立方体时，该立方体将获得另一个具有更高 z-index 且宽度和高度等于其父级的类。其他立方体最终将不可见。它们可能会消失，也可能不会消失。最后我只想看到我点击的展开的立方体。

这很简单。我想要做的是让一个立方体缓慢膨胀，而其他立方体也慢慢消失，或者至少用更高的 z-index 覆盖其他立方体。这在左上角的立方体中使用 .animate() 很容易实现，但在中间的立方体或右下角的立方体中我发现很难做到这一点。

P.S:ATM我不担心一切恢复原状。我只想按上述方式扩展每个 div。

有什么建议吗？

提前致谢

最佳答案

更新

我已经根据您的意见修改了代码

var container = $('#container'),
    cubes = $('#container > div'),
    count = 3, unit = 'vw',
    fullstate = false;

function randomcolor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function fillcolor(){	
  $(this).css({background: randomcolor()});
}

function setup () {	
  var t = $(this),
      i = t.index();
  t.data({
    top: Math.floor(i/count) * 100/count,
    left: (i%count) * 100/count
  });
}

function gridposition () {
  var t = $(this);
  t.css({
    'z-index': 0,
    top: t.data('top') + unit,
    left: t.data('left') + unit,
    width: 100/count + unit,
    height: 100/count + unit
  });
}

function fullcube () {
  $(this).css({
    'z-index': 9,
    width: 100 + unit,
    height: 100 + unit,
    top: 0,
    left: 0
  });
}

cubes.each(function () {
  setup.call(this);
  fillcolor.call(this);
  gridposition.call(this);
}).on('click', function () {
  if (fullstate) {
    cubes.each(gridposition);
  } else {
    fullcube.call(this);
  }
  fullstate = !fullstate;  
});

html, 
body, 
#container,
#container > div.fullscreen  {  
  width: 100%; height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

#container > div {
  position: absolute;
  transition: all 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div>
</div>

旧答案

这就是我解决这个问题的方法:

var container = $('#container'),
    cubes = $('#container > div');

function randomcolor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function fillcolor(){	
  $(this).css({background: randomcolor()});
}

cubes.each(fillcolor).on('click', function () {
  var h = 'hidden';
  cubes.toggleClass(h);
  $(this).removeClass(h).toggleClass('fullscreen');
});

html, 
body, 
#container,
#container > div.fullscreen  {  
  width: 100%; height: 100%;
}

body {
  margin: 0;
}

#container > div {
  float: left;
  width: 32vw; height: 32vw;
  transition: all 0.5s;
}

#container > div:hover {
  opacity: 0.75;
}

#container > div.hidden {
  width: 0; height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div>
</div>

关于javascript - 构建流畅的马赛克网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32100355/

javascript - 构建流畅的马赛克网格

上一篇：javascript - 将弹出式 JS slider 添加到菜单列表 - 链接不起作用

下一篇：html - 错误放置的 Bootstrap 列