随机广告位置

如果您在网站上的区块中有多个相同尺寸的展示广告，那么将它们在区块中的位置随机化是一个好主意。 这样对广告商来说更公平，不同的布局可以减少广告盲视现象。 目前该网站上来自 BuySellAds 的广告会自动执行此操作，但如果您有自己的手动系统，这里有三种不同的随机化方法。

查看演示   下载文件

方法 #1) 使用 PHP 随机化，随机起始图像

我认为在服务器端进行随机化是理想的，这样广告在页面加载时就已经随机化了。 我的第一个想法是在 1 到广告总数之间生成一个随机数。 然后运行两个 for 循环，一个从 1 到该随机数，另一个从该随机数到总数。

<?php
      $totalImages = 6;
      
      $randomFirst = rand(1,$totalImages);
      
      for ( $i=$randomFirst; $i <= $totalImages; $i++ ) {
          echo "<img src='images/ad-$i.png' alt='ad' /> ";
      }
      
      for ( $i=1; $i < $randomFirst; $i++ ) {
          echo "<img src='images/ad-$i.png' alt='ad' /> ";
      }
?>

效果不错，但它不像预期那样随机。 只有起始广告是随机的，但顺序始终相同。

方法 #2) 使用 PHP 随机化，随机顺序

为了获得更随机的结果，PHP 内置了一个用于随机化数组的函数。 所以只需使用 range 函数从 1 到广告总数设置数组，将其随机化，然后使用 foreach 循环将其输出。

<?php
      $totalImages = 6;
      
      $all = range(1,$totalImages);
      shuffle($all);
      
      foreach ($all as $single) {
          echo "<img src='images/ad-$single.png' alt='ad' /> ";
      }
?>

方法 #3) 使用 jQuery 随机化

这不太理想，因为图像可能已经加载，然后 JavaScript 开始执行并将其重新排列（很尴尬）。 不过，随机化确实在 DOM 就绪时发生，因此理论上它应该在图像加载之前发生。 当您可以在页面上控制 JavaScript 但无法控制 HTML 时，这将非常有用。

这里的方法是加载 jQuery 并加载 James Padolsey 的 shuffle 插件，然后只需定位图像并调用函数即可。

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);

$(function() {

    $("#ad-group-one img").shuffle();

});

 

还有其他随机化技巧吗？