Question

我试图建立一个流畅的马赛克网格。我使用流体词，因为我已经有一个工作的马赛克网格。您可以查看我为此问题而制作的小提琴：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，则宽度和高度。它们是浮动的，它们具有相对位置。我需要一个相对位置，因为＆＃34; divContainer＆＃34;在实际情况下，它没有固定的大小，在这种情况下，由于所有立方体都具有1/3（宽度和高度），它们将形成一个完美的网格，可以是3x3甚至1x9。

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

这很简单。我想做的是让一个立方体缓慢扩展，而其他立方体也慢慢消失，或者至少用更高的z指数覆盖其他立方体。使用 .animate（）在左上方的立方体中很容易实现，但在中间的立方体或右下角的立方体中我很难做到这一点。

P.S：ATM我并不担心一切都恢复原状。我只想扩展所提到的每个div。

有什么建议吗？

提前致谢

Answer 1

更新

我已根据您的评论

修复了代码

＆＃13;

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;  
});

＆＃13;

html, 
body, 
#container,
#container > div.fullscreen  {  
  width: 100%; height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

#container > div {
  position: absolute;
  transition: all 0.5s;
}

＆＃13;

<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>

＆＃13;

老答案

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

＆＃13;

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');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

构建流体马赛克网格

1 个答案: