Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマーク
  • 暮らし
  • ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
  • Twitterでシェア
  • Facebookでシェア

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

608usersがブックマークコメント48

    ガイドラインをご確認の上、良識あるコメントにご協力ください

    0/0
    入力したタグを追加

    現在プライベートモードです設定を変更する

    おすすめタグタグについて

      よく使うタグ

        ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

        608 usersphpspot.org

        ガイドラインをご確認の上、良識あるコメントにご協力ください

        0/0
        入力したタグを追加

        現在プライベートモードです設定を変更する

        おすすめタグタグについて

          よく使うタグ

            はてなブックマーク

            はてなブックマークで
            関心をシェアしよう

            みんなの興味と感想が集まることで
            新しい発見や、深堀りがもっと楽しく

            ユーザー登録

            アカウントをお持ちの方はログインページ

            記事へのコメント48

            • 注目コメント
            • 新着コメント
            nink
            多分順番もバラバラになるので、どこからでも読んで良い記事などが一番ベストかな?

            その他
            habuakihiro
            素敵!!!

            その他
            mapserver2007
            新聞風レイアウト

            その他
            denken
            実行時やウィンドウのリサイズ時に周りのboxの高さや幅から自分のleft値とtop値を求めて絶対位置指定する。columnWidthが何の幅なのか、なにが100なのかとかくらい説明を加えてあげたらいいと思う。

            その他
            aienstein
            FLASH抜きでボックスを積むレイアウトを考えてもいいかも

            その他
            takuya_1st
            これはいい新聞レイアウト

              その他
              dbfireball
              使い方を考えるのが楽しそうだな。

              その他
              amerio
              このレイアウトはオサレ。

              その他
              hirokiea
              ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

                その他
                ka-wara
                『綺麗にテトリスっぽく整列/新聞っぽくなりましたね』

                その他
                inouetakuya
                新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。

                その他
                billy-elliot
                "[webdesign][javascript][jquery][design][ボックス要素をレンガ状に整列][masonry]"

                  その他
                  nantan
                  レンガ状に並べる

                  その他
                  daidaiiroda
                  ボックス ブロック 要素をレンガ状に綺麗に整列

                  その他
                  takuya5455
                  新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。

                  その他
                  guangda
                  レンガ

                  その他
                  tettou77-1
                  へぇ、すごいのかどうかよく分からんけどすごい

                  その他
                  www_taca
                  これこれー。これやってみたかった!大きさの異なるブロックをきれいに配置

                  その他
                  omocoro-bookmark
                  あいつらはこれを使ってたのかーー!!

                  その他
                  ngsw
                  これこれ。

                    その他
                    numaroku
                    Sugeeeeee

                    その他
                    inarin
                    もうjQuery何でもありだなw

                    その他
                    koinobori
                    新聞みたいなレイアウト可能。おもしろい。

                      その他
                      kiyoshi1211
                      これはおもしろい。早速使ってみよう

                      その他
                      masa0x80
                      面白い

                      その他
                      hvc-001
                      何かに使えそう

                      その他
                      forcutie
                      ボックスをFIXさせるライブラリ

                      その他
                      adsty
                      高さの違うボックス要素を新聞の紙面のように整列してくれる。

                      その他
                      boyasan
                      へぇープラグイン

                      その他
                      runeharst
                      新聞っぽく見せる

                      その他

                      注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

                      リンクを埋め込む

                      以下のコードをコピーしてサイトに埋め込むことができます

                      プレビュー
                      アプリのスクリーンショット
                      いまの話題をアプリでチェック!
                      • バナー広告なし
                      • ミュート機能あり
                      • ダークモード搭載
                      アプリをダウンロード

                      関連記事

                        usersに達しました!

                        さんが1番目にブックマークした記事「ボックス要素をレ...」が注目されています。

                        気持ちをシェアしよう

                        ツイートする

                        ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

                        ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要...ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100,itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

                        ブックマークしたユーザー

                        • laconic2013/10/25laconic
                        • kyaraway2012/10/02kyaraway
                        • kt_flcl2012/08/10kt_flcl
                        • tarako18412012/07/18tarako1841
                        • ak1zak12011/12/27ak1zak1
                        • toktak2011/06/26toktak
                        • fnma2011/06/20fnma
                        • nyappaweb2011/05/06nyappaweb
                        • f-suger2011/04/16f-suger
                        • araishi2011/04/08araishi
                        • nieve992011/04/08nieve99
                        • takeodon2011/04/08takeodon
                        • jun03142011/04/08jun0314
                        • ukimi2011/04/07ukimi
                        • nink2011/04/07nink
                        • oqzl2011/04/07oqzl
                        • habuakihiro2011/04/07habuakihiro
                        • mikan322011/04/07mikan32
                        すべてのユーザーの
                        詳細を表示します

                        ブックマークしたすべてのユーザー

                        同じサイトの新着

                        同じサイトの新着をもっと読む

                        いま人気の記事

                        いま人気の記事をもっと読む

                        いま人気の記事 - 暮らし

                        いま人気の記事 - 暮らしをもっと読む

                        新着記事 - 暮らし

                        新着記事 - 暮らしをもっと読む

                        同時期にブックマークされた記事

                        いま人気の記事 - 企業メディア

                        企業メディアをもっと読む

                        はてなブックマーク

                        公式Twitter

                        はてなのサービス

                        • App Storeからダウンロード
                        • Google Playで手に入れよう
                        Copyright © 2005-2025Hatena. All Rights Reserved.
                        設定を変更しましたx

                        [8]ページ先頭

                        ©2009-2025 Movatter.jp