http://dfcreative.github.io/projects/waterfall/1 Include jquery/zepto and jquery.waterfall <script src="js/zepto.js"></script> <script src="js/jquery.waterfall.js"></script>
グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」｜BLACKFLAG
最近のレスポンシブWebデザインの影響もあって ボックスをタイル状に並べた構成のグリッドレイアウトWebサイトをよく見かけます。 ウィンドウサイズによって最適な配置で画面を構成できたりするグリッドレイアウトですが jQueryを使って簡単に実装することができるプラグインを自分用メモとして紹介してみます。 まずは「BlocksIt.js」 BlocksIt.js | Dynamic Grid Layout jQuery Plugin – Plugin Page デモページはこちら BlocksIt.js Demonstration #1 – Random Dynamic Grid Layout BlocksIt.js Demonstration #2 – Pinterest Dynamic Grid Layout with CSS3 Transitions ページをロードするたびにランダムで
Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」
最近、特に女性に人気があるPinterest（ピンタレスト）。 その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。 Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。 そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。 サンプルページを作ってみました。 → Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。 【使用方法】 まずは、こちらの本家のサイトからBlocksIt.jsなど一式ダウンロードします。 <head>部分にcssと
Pinterest風のデザインを実現するjQueryプラグイン「The Wookmark」｜株式会社アクトゼロ｜クリエイティブブログ
通常、htmlの項目は規則正しく並ばせることは出来ますが、 Pinterestの様に隙間を埋めるようなことは出来ません。 [通常のhtml/css] [Pinterest風のレイアウト] ■The Wookmarkをダウンロード 以下のサイトの右カラムにある「Download ZIP」からダウンロードします。 https://github.com/GBKS/Wookmark-jQuery ■htmlを記述 構造は、並べたい画像を全てul ＞ liの形式で並べその上を＜div＞で囲っておきます。 この時、＜div＞にはrole属性も設定しておきます。 ＜div id=”main” role=”main”＞ ＜ul id=”tiles”＞ ＜li＞＜img src=”img/sample01.jpg” alt=”” /＞＜/li＞ ＜li＞＜img src=”img/sample01.jpg”
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
masonry + ajaxでpinterest風タイルビューを実現する - Qiita
pinterestのような、 ・要素を隙間なく敷き詰める ・ブラウザのリサイズに応じて配置も変わる といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります その中でも今回は定番のmasonryを使い、 ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます 基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ! 完成イメージは(手前味噌ですが)こんなかんじです↓ tokyotownname.com では始めます、 画像がいくつかトップにあり、 その下に「もっと読む」ボタンがあるとします。ありがちですね。 <!-- タイルビュー --> <div id="images"> <div id="image-unit">....</div> <div id="image-unit">....</div> ...... <div id
TokyoTownName
千代田区 九段北 | Kon Yuichi 2013-06-16 02:16:50 +0900 Show 中央区 新富 | Kon Yuichi 2013-06-14 00:30:50 +0900 Show 墨田区 向島 | konpyu 2013-06-09 00:02:17 +0900 Show 墨田区 堤通 | konpyu 2013-06-08 23:56:14 +0900 Show 墨田区 八広 | konpyu 2013-06-08 23:54:10 +0900 Show 墨田区 京島 | konpyu 2013-06-08 23:52:27 +0900 Show 墨田区 東向島 | konpyu 2013-06-08 23:44:39 +0900 Show 渋谷区 恵比寿西 | konpyu 2013-05-27 01:02:10 +0900 Show 渋谷区 東 | kon
CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」:phpspot開発日誌
Salvattore ? A jQuery Masonry alternative with CSS-driven configuration. CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」。 Pinterest風UIを実現するライブラリは多数ありますが、CSSで設定が出来るのは便利かもしれません JSは使っていますが、カラム数等の調整をCSSでできるのが特徴です。 関連エントリ ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
Pinterest風にCookpadの人気レシピを表示するサイトを作った – taichino.com
ピークは過ぎた気もしますが、見ているだけで楽しい気がするPinterest。ちょっとこの見た目を実験したくなったので作ってみました。スコア(つくれぽ数 x はてぶ数)が高いCookpadの中でも人気のありそうなレシピを一覧できます。名前はRecipe + PinterestでRecipinterestです。アクセスはコチラから。 今日の晩ご飯が決まらないなーという時に、一度ご覧くださいませ。 今回はサーバー側は目新しいものはなくて、いつも通りのDjangoなのですが、クライアント側でmasonryというタイリング用のモジュールを使わせてもらっています。やや動きに不満がありますが、簡単にPinterest風の見た目を作れて楽しいです。
Galereya. jQuery gallery.
Responsive, easily customizable jquery gallery with a masonry layout. Works on Chrome, Safari, Firefox, Opera(turned off some CSS animations), IE7+(Graceful degradation), Android browser, Chrome mobile, Firefox mobile, Safari on iOS and etc. Galereya effects and browser compatibility depends on your custom CSS styles a lot! $('#gal1').galereya({ load: function(next) { $.getJSON('images.json', func
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
コンテンツ区切りが秀逸すぎるPinterest風ブログWebデザイン
House: Kolekcja Lato 2013 Webデザイン３つの良いとこ : 3 Good Point! 刺激的なPinterest風Webデザイン 記事の区切り線が秀逸！ デザインの統一性・一貫性 私はWebデザインのココを見た！ Tweet皆さんGW楽しんでいますでしょうか。絶賛お休み中ですが、簡単にWebデザインレビューいきますよ！ 今日はPinterest風ブログWebデザインで非常に参考になるサイトがあったのでご紹介。ページというか、記事区切りが秀逸です。当ブログ「Web風」と同じく、masonryを使用していますが、こんな区切り方があるとは驚き。 masonryを利用した記事区切りが刺激的 トップスクリーンから下にスクロールすると、pinterest風のコンテンツ区切りが秀逸なブログ形式のWebデザインが登場します。 このマルチカラムの段々なレイアウトは、「masonr
タイル上に並べて、画像を切り替える画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」
Animated Responsive Image Grid 画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。 レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。 サンプルを見て頂くとわかりやすいと思います。 → タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその１ → タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその２ オプションを変更することで、多彩なエフェクト効果が可能になっています。 【使用方法】 まずはこちらのAnimated Responsive Ima
可変グリッドレイアウトのプラグインjQuery Masonry タイルレイアウト
JavaScript 可変グリッドレイアウトのプラグインjQuery Masonryを実装する 可変グリッドレイアウトとは、ブラウザ幅を変えるとそれにあわせてカラム数が変化し、コンテンツが再配置されるレイアウトです。2010年ごろから見かけるようになり、リキッドレイアウトと同じく環境対応型のレイアウトとして注目されています。 このレイアウトは情報の一覧性が高く、ページ全体にボリューム感を出すことができますが、どこから見ていいのか迷う可能性、コンテンツの位置が変わることにより迷子になる危険性も孕んでいます。 実際に利用する場合は、情報の整理整頓を考える必要があるようです。 今回は可変グリッドレイアウトを再現できるポピュラーなプラグインjQuery Masonryを実装してみます。Masonryはメーソンリーと読みます。メーソンリーとは石、レンガ、コンクリートブロックなどの組石造の建築物と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pinterest風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル │ ぱんにゃっと/H&Y
Home
Pinterest風なグリッドレイアウトを簡単に実装する「jQuery.waterfall」 - Tecuration .com
Recipinterest - 人気のレシピを一覧
jQuery Wookmark Plug-in Example
軽快な動作で要素をウィンドウ幅に応じてタイル状に並べることができる「Wookmark jQuery Plugin」 | NAKAZI LAB.（ナカジラボ）