14
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-06-07

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

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

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} 重なり具合をどのぐらい許容するか
14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14