javascript – 使用JS / Jquery / CSS限制div中的多个图像

2023年1月4日 188次阅读

在我的网页上有
Gridster个小部件.在这些小部件中,最初的图像是从JSON显示的(图像的名称来自JSON,然后我放入图像的src)

用户还可以通过单击按钮添加图像.用户还可以通过单击图像上的X按钮删除图像.

我面临的问题

当来自JSON的图像更多或用户手动添加更多图像时,图像将从小部件中移出.

我想要的输出

现在我试图在窗口小部件中限制这些图像,使得图像仅存在于div的边界.

当有更多图像时,其他现有图像将调整大小,并且所有图像将适合该区域.

当我删除图像时,其他图像会变大.在任何情况下,整个区域都将被图像占据.

JS：

    //JSON which I get from backend

    var json = [{
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
      }
    ];
    //Loop which runs over JSON to generate <li> elements in HTML

    for (var index = 0; index < json.length; index++) {
      var images = json[index].html.split(',');
      var imageOutput = "";

      for (var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src=' + images[j] + '> <input type="button" class="removediv" value="X" /></div></div>';
      }

      gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>' + json[index].html + '</textarea></li>', json[index].size_x, json[index].size_y, json[index].col, json[index].row);
    }

    //Function to delete an image from widget

    $(document).on('click', '.removediv', function() {
      $(this).closest('div.imagewrap').siblings('textarea')
      $(this).closest('div.imagewrap').remove();

    });

    //Function to delete a widget

    $(document).on("click", ".delete-widget-button", function() {
      var gridster = $(".gridster ul").gridster().data('gridster');
      gridster.remove_widget($(this).parent());
    });



    //Function to add mode Images to widgets from Modal

    var parentLI;
    $(document).on("click", ".addmorebrands", function() {
      parentLI = $(this).closest('li');
      $('#exampleModalCenter').modal('show');
      $('#exampleModalCenter img').click(function() {
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });

    $('#add-image').click(function() {
      parentLI.append('<div class="imagewrap"><img src="' + selectedImageSRC + '"> <input type="button" class="removediv" value="X" /></div>');
      parentLI.children('textarea').append(', ' + selectedImageSRC);
      $('#exampleModalCenter').modal('hide');
    })

HTML

 <div class="gridster">
      <!--  <li> from JSON are placed here images are a part of li -->
      <ul>

      </ul>
    </div>

到目前为止Fiddle

我不确定这是否只能用CSS实现,或者需要任何JS

更新1

我尝试过很多不同的CSS,但仍然无法获得预期的输出,所以如果有人可以帮助我,那将非常有帮助

最佳答案 也许Gridster有一个内置的方式来安排网格单元格中的项目,如果你还没找到方法,请尝试
this.

我添加了一些CSS：

.image-wrap-container{
  min-height: 70%
}

.image-wrap-container div.imagewrap{
  width: 33%
}

.text-area-wrap{
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 30%;
    display: inline-flex;
}

.new.gs-w{
  width: 200px;
  min-height: 200px
}

.addmorebrands{
  position: absolute;
  left:0
}
.delete-widget-button{
  position: absolute;
  right:0
}

并重新调整了一点你的HTML,所以图像在单元格内适合,我希望不破坏任何东西,javascript是最少修改,只是根据新的HTML结构添加图像.

注意：我试图让lis’的高度调整到它包含的元素数量,但是[data-sizey =“2”]继续妨碍我,所以在抛出一些可能不必要的黑客之前,尝试使用它来实现图书馆自己的选择,祝你好运.

另外,我注意到你用它来更新textareas：

parentLI.children('.imagenames').val(function(i, selectedImageSRC) {return selectedImageSRC + ', '});

这将无效,因为您使用相同的名称作为参数,与原始selectedImageSRC变量冲突.如果你在这方面仍有问题,我用以下代码替换它：

parentLI.children('.imagenames').val(function(i, currentContent) {return currentContent + ',' + selectedImageSRC + ', '});

奖金功能

用于移除图像的按钮对于图像而言是很大的并且覆盖相当大的部分,所以我冒昧地：

.removediv{
  visibility: hidden
}
.imagewrap:hover .removediv{
  visibility: visible
}

希望能帮助到你

点赞