首頁 web前端 js教程 瀑布流佈局並自動載入實作程式碼_jquery

瀑布流佈局並自動載入實作程式碼_jquery

May 16, 2016 pm 05:40 PM
載入 佈局 瀑布流

自從Pinterest使用了一種新的方式佈局取得成功之後,從此互聯網出現了佈局潮流,我們把他叫做瀑布流! !在網路上流行起來,從國外到國內普遍存在。國內現有美麗說,蘑菇街,花瓣等代表的網站。

瀑布流是流行一段時間了,現在網路上出現了很多的插件。使用起來更是非常的方便。目前用的非常多,而且有是一個juqery的插件masonry,插件位址:http://masonry.desandro.com/

先使用css把一個網頁按照從上到下的方式佈局好。
使用起來更是很方便:

我先引用好jquery文件和masonry文件,使用如下程式碼:

複製程式碼



複製程式碼



複製程式碼


程式碼如下:
$(function(){ var $container = $('#container'); $container.imagesLoaded( function() { $container.masonry({ itemSelector : '.content_box', isFitWidth: true,//// 是否可調整大小Boolean isRTL:false ////使用從右到左的版面Boolean }); });
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
Windows 11: 匯入和匯出開始佈局的簡單方法 Windows 11: 匯入和匯出開始佈局的簡單方法 Aug 22, 2023 am 10:13 AM

在Windows11中,「開始」功能表經過重新設計,並具有一組簡化的應用,這些應用程式排列在頁面網格中,這與它的前身不同,後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局,並將其匯入並匯出至其他Windows設備,以根據您的喜好進行個人化設定。在本指南中,我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout?導入開始佈局是Windows10和更早版本中使用的cmdlet,用於將「開始」功能表的自定

在Illustrator中載入插件時出錯[修復] 在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息?一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題,但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤,我們將在本文中指導您修復問題,請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息,您可以使用以下用途:以管理員身

如何在 Windows 11 中儲存桌面圖示位置佈局 如何在 Windows 11 中儲存桌面圖示位置佈局 Aug 23, 2023 pm 09:53 PM

Windows11在使用者體驗方面帶來了很多東西,但迭代並不完全防錯。使用者不時會遇到問題,圖示定位的變更很常見。那麼如何在Windows11中保存桌面佈局呢?該任務有內建和第三方解決方案,無論是保存當前視窗的螢幕解析度還是桌面圖示的排列。對於桌面上有一堆圖示的使用者來說,這一點變得更加重要。繼續閱讀以了解如何在Windows11中儲存桌面圖示位置。為什麼Windows11不儲存圖示佈局位置?以下是Windows11不保存桌面圖示佈局的主要原因:對顯示設定的變更:通常,當您修改顯示設定時,配置的自訂

Stremio字幕不工作;載入字幕時出錯 Stremio字幕不工作;載入字幕時出錯 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上運行嗎?一些Stremio用戶報告說,影片中沒有顯示字幕。許多用戶報告說他們遇到了一條錯誤訊息,上面寫著「載入字幕時出錯」。以下是與此錯誤一起顯示的完整錯誤訊息:載入字幕時出錯載入字幕失敗:這可能是您正在使用的插件或您的網路有問題。正如錯誤訊息所說,可能是您的網路連線導致了錯誤。因此,請檢查您的網路連接,並確保您的網路運作正常。除此之外,這個錯誤的背後可能還有其他原因,包括字幕加載項衝突、特定影片內容不支援字幕以及Stremio應用程式過時。如

css載入不出來怎麼解決 css載入不出來怎麼解決 Oct 20, 2023 am 11:29 AM

css載入不出來的解決辦法有檢查檔案路徑、檢查檔案內容、清除瀏覽器快取、檢查伺服器設定、使用開發者工具和檢查網路連線等。詳細介紹:1、檢查檔案路徑,首先請確保CSS檔案的路徑正確,如果CSS檔案位於網站的不同部分或子目錄中,需要提供正確的路徑,如果CSS檔案位於根目錄下,路徑應該是直接的;2、檢查文件內容,如果路徑正確,那麼問題可能出在CSS文件本身,開啟CSS文件檢查等等。

WordPress網頁錯位現象解決攻略 WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中,有時候我們會遇到網頁元素錯位的情況,這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象,我們需要仔細分析問題、找出可能的原因,並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略,同時提供具體的程式碼範例,幫助開

插入超連結時Outlook凍結 插入超連結時Outlook凍結 Feb 19, 2024 pm 03:00 PM

如果您在插入超連結時出現在Outlook時遇到凍結問題,可能是因為網路連線不穩定、Outlook版本舊、防毒軟體幹擾或加載項衝突等原因。這些因素可能導致Outlook無法正常處理超連結操作。修正插入超連結時Outlook凍結的問題使用以下修復程式解決插入超連結時Outlook凍結的問題:檢查已安裝的加載項更新Outlook暫時停用您的防毒軟體,然後嘗試建立新的使用者設定檔修復辦公室應用程式卸載並重新安裝Office我們開始吧。 1]檢查已安裝的加載項可能是Outlook中安裝的某個加載項導致了問題。

如何使用HTML和CSS建立響應式輪播圖佈局 如何使用HTML和CSS建立響應式輪播圖佈局 Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS建立一個響應式輪播圖佈局在現代的網頁設計中,輪播圖是一個常見的元素。它能夠吸引用戶的注意力,展示多個內容或圖片,並且能夠自動切換。在本文中,我們將介紹如何使用HTML和CSS建立一個響應式的輪播圖佈局。首先,我們需要建立一個基本的HTML結構,並且加入所需的CSS樣式。以下是一個簡單的HTML結構:<!DOCTYPEhtml&g

See all articles