我如何创建随机和动态大小图像的马赛克风格图片库，而不使用任何插件

How can I create mosaic style image gallery of random and dynamic size images without using any plugins?

本文关键字：图片库 风格 马赛克 插件 任何 图像 何创建 创建 动态 随机      更新时间：2023-09-26

我试图创建一个简单的马赛克风格的图片库。我已经在网上搜索了，发现很多人建议使用可用的插件。但是我想知道有什么方法可以让我自己创建马赛克布局图库?我想从数据库中获取随机和动态大小的图像，并显示在马赛克风格。

阅读韦斯利的回答。据说真正的随机要么很难，要么不可能，因为它会产生空白，不会填满。

如果你想看到只有3个预定义框大小的缩小版本的实现，点击这里

一些代码:

var FULL = {'height': 100, 'width': 200};
var HALF = {'height': 50, 'width': 100};
var QUARTER = {'height': 25, 'width': 50};
var sizes = ['quarter', 'half', 'full'];
var vacancy = [
  [1 , 1 , 1 , 1 ],
  [1 , 1 , 1 , 1],
  [1 , 1 , 1 , 1],
  [1 , 1 , 1 , 1]
];
for (var i = 0; i < boxes.length; i++) {
  if ($('.grid.box.vacant').size() < 1) {
    var gridBox = $('<div class="grid box vacant"/>');
    $('.container').append(gridBox);
    vacancy = [
      [1 , 1 , 1 , 1 ],
      [1 , 1 , 1 , 1],
      [1 , 1 , 1 , 1],
      [1 , 1 , 1 , 1]
    ];
  }
  var className;
  var reduceChoice = 0;
  do {
    className = sizes[Math.floor(Math.random() * (sizes.length - reduceChoice))];
    var myPoint = findFreeGrid(vacancy, className);
    reduceChoice++;
  } while (!myPoint);
  markFill(vacancy, className, myPoint);
  jQuery(boxes[i]).addClass(className).css({'top': myPoint[1] * QUARTER.height, 'left': myPoint[0] * QUARTER.width});
  $('.grid.box.vacant').append(boxes[i]);
  if (noFreeGrid(vacancy)) {
    $('.grid.box.vacant').removeClass('vacant');
  }
}
function noFreeGrid(vacancy) {
  var nofree = true;
  for (var i = 0; i < vacancy.length; i++)
    for (var j = 0; j < vacancy[0].length; j++)
      if (vacancy[i][j] == 1) nofree = false;
  return nofree;
}
function findFreeGrid(vacancy, className) {
  for (var r = 0; r < 4; r++)
    for (var c = 0; c < 4; c++) {
      myPoint = [r, c];
      if (checkFit(vacancy, className, myPoint))return myPoint;
    }
  return false;
}
function checkFit(vacancy, size, position) {
  if (size == 'full') {
    for (var i = 0; i < vacancy.length; i++)
      for (var j = 0; j < vacancy[0].length; j++)
        if (vacancy[i][j] != 1) return false;
    return true;
  }
  else if (size == 'half' && position[0] < 3 && position[1] < 3) {
    if (vacancy[position[0]][position[1]] == 1
      && vacancy[position[0]][position[1]] == 1
      && vacancy[position[0] + 1][position[1]] == 1
      && vacancy[position[0]][position[1] + 1] == 1
      && vacancy[position[0] + 1][position[1] + 1] == 1
      )return true;
  }
  else if (size == 'quarter') {
    if (vacancy[position[0]][position[1]] == 1)return true;
  }
  return false;
}
function markFill(vacancy, size, position) {
  if (size == 'full') {
    for (var i = 0; i < vacancy.length; i++)
      for (var j = 0; j < vacancy[0].length; j++)
        vacancy[i][j] = 0;
  }
  else if (size == 'half') {
    vacancy[position[0]][position[1]] = 0;
    vacancy[position[0]][position[1]] = 0;
    vacancy[position[0] + 1][position[1]] = 0;
    vacancy[position[0]][position[1] + 1] = 0;
    vacancy[position[0] + 1][position[1] + 1] = 0;
  }
  else if (size == 'quarter') {
    vacancy[position[0]][position[1]] = 0;
  }
}
相关文章：