javascript - 如何从一个子for​​each中获取值并将其放入父循环并随机排列数组中的所有值

Question

我正在使用 WordPress 和 ACF Gallery。在每篇文章中，我都有一个图片库。

我需要从所有图库中获取所有图像并随机播放它们。

我怎样才能做到这一点？

现在我有这个:

    <?php if ( $query->have_posts() ) : ?>
        <?php while ( $query->have_posts() ) : $query->the_post();
            $images = get_field( 'gallery' );
            $size = 'full';
            if ( $images ) : ?>
                <?php foreach( $images as $image ): ?>
                    <img class="post-gallery" src="<?php echo $image['url']; ?>">
                <?php endforeach; ?>
           <?php endif; ?>
           <?php if (has_post_thumbnail()) : ?>
                <div class="post" style="background-image: url(<?php the_post_thumbnail_url(); ?>);"></div>
<?php endif; ?>

我认为我们需要以某种方式将所有帖子和帖子的图库放在一个数组中并对其进行洗牌？

更新:js部分(Infinite+masonry+imagesLoaded+randomize blocks

    var images = $('.container-post .col-50');
for (var i = 0; i < images.length; i++) {
    var imageFirst = Math.floor(Math.random() * images.length -1) + 1;
    var imageSecond = Math.floor(Math.random() * images.length -1) +1;
    images.eq(imageFirst).before(images.eq(imageSecond));
}
var $container = $('.container-post').masonry({
    itemSelector: '.container-post .col-50',
});

$container.imagesLoaded().progress( function() {
    $container.masonry('layout');
});
var masonry = $container.data('masonry');

$container.infiniteScroll({
    outlayer: masonry,
    path: '.wp-pagenavi .page',
    append: '.container-post .col-50',
    scrollThread: 1,
    history: false,
    hideNav: '.wp-pagenavi',
    status: '.page-load-status',
});

祝你有美好的一天!

Answer 1

我个人会让 PHP 完成繁重的工作，并且如您所说，创建一个 JS 可以循环的随机数组。例如:

<?php
    $collectedImages = [];
    if ($query->have_posts()) {
        while($query->have_posts()) {
            $query->the_post();
            $images = get_field('gallery');
            $size = 'full';
            if ($images === false) {
                continue;
            }

            foreach ($images as $image) {
                $collectedImages[] = $image['url'];
            }
        }
    }
    shuffle($collectedImages);

    foreach ($collectedImages as $image) {
        // Render it! 
    }
?>

更多信息:

• > shuffle() - PHP docs