Javascript 我如何随机化在网站上生成图像的顺序?
假设我有一个包含10个图像文件的文件夹,我希望我的vanilla JS能够将它们随机化,并利用网格布局在网站的引导容器中生成它们。当然,这需要对图像进行一些调整,以确保纵横比仍然保持不变。我想不出一个解决方案,把它们随机放在一个容器里。我尝试的是创建一个随机拼贴的东西 我看到了,但这只是上传文件 HTMLJavascript 我如何随机化在网站上生成图像的顺序?,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,假设我有一个包含10个图像文件的文件夹,我希望我的vanilla JS能够将它们随机化,并利用网格布局在网站的引导容器中生成它们。当然,这需要对图像进行一些调整,以确保纵横比仍然保持不变。我想不出一个解决方案,把它们随机放在一个容器里。我尝试的是创建一个随机拼贴的东西 我看到了,但这只是上传文件 HTML 您可以创建一个要使用的图像URL数组,然后创建另一个包含从0到N-1个图像的数字的数组,这些数字可用于访问图像。然后,您将使用如下函数洗牌索引列表: function shuffle(indi
您可以创建一个要使用的图像URL数组,然后创建另一个包含从0到N-1个图像的数字的数组,这些数字可用于访问图像。然后,您将使用如下函数洗牌索引列表:
function shuffle(indices) {
indices.sort(() => Math.random() - 0.5);
}
然后,您可以使用(无序)索引从图像数组中获取src属性,您可以将该属性分配给指定的HTML(引导)元素。比方说,您先试试?这不是一个免费的编码网站。请在问之前先试一下。如果您确实尝试了某项操作,请包括您的尝试。将图像路径存储在数组中,然后display@Nicolas,我添加了我的代码。我在一个单独的文件中尝试了这个方法,它工作得很好,但是当我使用引导容器时,似乎出现了一些问题。
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();
.masonry {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-auto-rows: 0;
}
.masonry-item {
border-radius: 5px;
}
.masonry-item {
background-color: #eee;
border-radius: 5px;
overflow: hidden;
}
.masonry-item,
.masonry-item img {
position: relative;
}
.masonry-item:after {
font-weight: bold;
background-color: rgba(0, 0, 0, .5);
content: counter(masonry);
counter-increment: masonry;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: all .1s ease-in;
}
.masonry-item:hover:after {
font-size: 30px;
background-color: rgba(0, 0, 0, .75);
}
function shuffle(indices) {
indices.sort(() => Math.random() - 0.5);
}