clover.blue

タグをランダム配置&サイズにしてなるべく重ならないように配置するjQueryプラグイン

Data
2016/10/05
Tag

ランダム配置を作った時に上手く行くときはきれいな形になるのだけど
失敗するとすごい重なっちゃってあんまり綺麗に見えないことがあります・・。

なので極力重ならないようにしてくれる仕組みを作ってみました。

site: http://develo.org/jquery.random
GitHub: https://github.com/kamem/jquery.random

新しく作り直してnpmに登録しました。
仕様も少し変わっています。
GitHub: https://github.com/kamem/jquery.randomElements

日本語 README
https://github.com/kamem/jquery.randomElements/blob/master/README.jp.md

仕様

  1. 生成したい親要素をしていbodyの下に生成したい場合$('body')(※ appendされます。)
  2. 画像を中身に入れたい場合は画像を指定(必要がない場合は空)
  3. 生成したオブジェクトが重なっている場合は指定の数分ランダムをやり直す。

DEMO

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.random.js"></script>
<script type="text/javascript">
    $(function(){
        $('body').random('<img src="img/img.png">');
    });
</script>

オプション

初期設定

tagName: 'p',
className: 'randomContent',
content: '',
num: 30,
stageWidth: $content.width(),
stageHeight: $content.height(),
width: 100,
height: 100,
min: 10,
isSize: true,
tryCount: 10,
adjustment: 0
  • tagName {String} 生成したいタグの名前
  • className {String} タグに付けるクラス名(randomContent + 連番)
  • content {String} タグの中身(画像など入れ込みたい場合など)
  • num {Number} 生成したいタグの個数
  • stageWidth {Number} 領域の横幅
  • stageHeight {Number} 領域の縦幅
  • width {Number} 画像の横幅最大値 (widthとheightが同じ値の場合縦横比を保ってランダムにします。)
  • height {Number} 画像の縦幅最大値
  • min {Number} 画像の最小値
  • isSize {Boolean} サイズをランダムにするか
  • tryCount {Number} 配置が重なっていた時に再度ランダムをやり直す回数
  • adjustment {Number} 重なり具合をどのぐらい許容するか