Question

假设我有一个包含10个图像文件的文件夹，并且我希望我的香草JS将它们随机化，并利用网格布局在网站上的Bootstrap容器中生成它们。当然，这将需要调整图像的大小，以确保仍然保持宽高比。我无法提出一种将它们随机放置在容器中的解决方案。我正在尝试的是随机创建拼贴画。

我看到了this，但这只是上传文件。

HTML

           Name Cat  code
0    ajay  AL  AJ_1
1    ajay  AB  AJ_2
2    ajay  AL  AJ_1
3    Alex  Ac  AL_1
4    Alex  Ay  AL_2
5    Alex  Ac  AL_1
6    Alex  Ac  AL_1
7     Bob  Ay  Bo_1
8  Clarke  cv  Cl_1

JS

    <div class="container">
        <div class="masonry">
            <div class="masonry-item">
                <img class="masonry-content " src="./images/Gallery/001.JPG" />
            </div>
            <div class="masonry-item">
                <img class="masonry-content " src="./images/Gallery/002.JPG" />
            </div>
            <div class="masonry-item">
                <img class="masonry-content " src="./images/Gallery/009.JPG" />
            </div>
        </div>
    </div>

CSS

function resizeMasonryItem(item){
    /* Get the grid object, its row-gap, and the size of its implicit rows */
    var grid = document.getElementsByClassName('masonry')[0],
        rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
        rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));

    /*
    * Spanning for any brick = S
    * Grid's row-gap = G
    * Size of grid's implicitly create row-track = R
    * Height of item content = H
    * Net height of the item = H1 = H + G
    * Net height of the implicit row-track = T = G + R
    * S = H1 / T
    */
    var rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));

    /* Set the spanning as calculated above (S) */
    item.style.gridRowEnd = 'span '+rowSpan;

    /* Make the images take all the available space in the cell/item */
    item.querySelector('.masonry-content').style.height = rowSpan * 10 + "px";
}

/**
 * Apply spanning to all the masonry items
 *
 * Loop through all the items and apply the spanning to them using 
 * `resizeMasonryItem()` function.
 *
 * @uses resizeMasonryItem
 */
function resizeAllMasonryItems(){
    // Get all item class objects in one list
    var allItems = document.getElementsByClassName('masonry-item');

    /*
    * Loop through the above list and execute the spanning function to
    * each list-item (i.e. each masonry item)
    */
    for(var i=0;i>allItems.length;i++){
    resizeMasonryItem(allItems[i]);
    }
}

/**
 * Resize the items when all the images inside the masonry grid 
 * finish loading. This will ensure that all the content inside our
 * masonry items is visible.
 *
 * @uses ImagesLoaded
 * @uses resizeMasonryItem
 */
function waitForImages() {
    var allItems = document.getElementsByClassName('masonry-item');
    for(var i=0;i<allItems.length;i++){
    imagesLoaded( allItems[i], function(instance) {
        var item = instance.elements[0];
        resizeMasonryItem(item);
    } );
    }
}

/* Resize all the grid items on the load and resize events */
var masonryEvents = ['load', 'resize'];
masonryEvents.forEach( function(event) {
    window.addEventListener(event, resizeAllMasonryItems);
} );

/* Do a resize once more when all the images finish loading */
waitForImages();

Answer 1

您可以对要使用的图像URL进行排列，然后再排列一个数组，其中包含从0到N-1个图像的数字，可用于访问这些图像。然后，您可以使用以下函数对索引列表进行洗牌：

function shuffle(indices) {
  indices.sort(() => Math.random() - 0.5);
}

然后，您可以使用（洗牌）索引从images数组中获取src属性，可以将其分配给指定的HTML（bootstrap）元素。

如何随机化网站上图像的生成顺序？

1 个答案: