【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。 ［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に［width］［height］属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの［imagesLoaded］を併用するワザです。 ［imagesLoaded］を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用して、［Masonry］側の計
InfiniteScroll+Masonry+imagesLoaded - KYOHON
2013-11-14 InfiniteScroll+Masonry+imagesLoaded CSS jQuery InfiniteScrollでぐぐって上位に来る記事の内容が古すぎて参考にならなかったので、自分であれこれした備忘録です。 Masonryで並べ替えた後、要素を一つづつアニメーション表示させる InfiniteScroll+Masonryでの無限スクロールを実装 ロード中のメッセージを下部に固定 取り扱うプラグインは以下の３つ。MasonryはjQuery無しでも動きます。 Masonry InfiniteScroll imagesLoadedMasonryの作者はTwitterのWebデザイナーらしいです。他にも上記のimagesLoadedやら、Isotopeも作っているそうで、非常に優秀な方っぽいです。幅980pxの中でmasonryさせていきます。 320*3
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
MasonryとInfinitescrollでPinterest風一覧ページを作る | 埼玉のWebコンサルタント ColdSleep Works
（投稿日：2014年05月29日） 最近カメラがマイブームなので、WordPressを使ってフォトログを作成してみました。jQueryの「Masorny」と「Infinitescroll」を使って今をときめく（？）Pinterest風になっています。 完成したサイトはこちら、Snap of the Deadです。 Pinterest風のタイルレイアウトなら、横長の写真と縦長の写真やアスペクト比の違う写真が混在してもキレイに整列してくれます。また、端末サイズが変わってもタイルの配置パターンを変えれば簡単に対応できます。 Pinterest風の一覧ページの作り方 タイル風のレイアウトはjQueryのMasonryを使い、それに無限スクールのInfinitescrollを組み合わせて作ります。 まずは各スクリプトを読み込みます。 <script src="//code.jquery.com/jq
jQueryって素敵やの～: イラストお絵描き練習
その名の通りお絵描き練習してるブログ。（いわゆる「イラスト」に免疫の無い方はご注意ください） デッサンや「1day1pict様」の「お題」で練習をしています。男性描く率多し。ほんのりBL臭の為これまた注意。 「1day1pict」様とは→「一日一絵を描いて上達をめざそうという絵描きさんのために作られたお題サイト」です。 おすすめなお題増強中w←まとめ記事へ飛ぶ 継続は力なり！だがしかし、ー毎日って難しい…(´Ａ｀。) (08/05)塗り終わるまでが練習です。。。 (07/22)デッサン支援サイト覚書 (01/29)1d1pお題「96 コック」 (01/23)寝物語を自家発電する (07/08)1d1pお題「95 傘をさす」 (04/12)遅かった (12/31)2015年の反省とか (12/29)1d1pお題「94 プリーツスカート」 (12/15)全然進まないorz (11/29)黒タイ
WordPressでjQuery Masonry使ったら重なっちゃった時の解決方法
レスポンシブ・ウェブ・デザインでサイトをつくっているとき、イメージの一覧にテキストをつけて表示させる場合もやっぱりレスポンシブにしたいもの。 そんなときには、jQuery MasonryというjQueryのプラグインが便利なんだけど、WordPressで使う場合は、jQueryをカプセル化したり、 wp_enqueue_scriptをつかって、jsファイルを読み込むのがなかなか敷居が高かったりします。 そのやり方は、多分、なつきさんのStocker_jpのこの記事が一番わかりやすいと思います。 WordPressのトップページを雑誌や新聞のような段組にする方法 | Stocker.jp / diary で、こちらの記事を読みながらやってみたのですが、なぜだかイメージが重なってしまう問題が発生。 clear bothを使ったり、改行やテキストいれたりしたものの解決せず、いろいろ調べていたらこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像をタイル状に並べるギャラリーサイトに採用したいjQuery