phosphor+fuse实现带关键字搜索过滤的图片瀑布流鼠标悬停显示文字代码
代码语言:html
所属分类:瀑布流
代码描述:phosphor+fuse实现带关键字搜索过滤的图片瀑布流鼠标悬停显示文字代码
代码标签: phosphor fuse 关键字 搜索 过滤 图片 瀑布流 鼠标 悬停 显示 文字 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css"> <style> body, html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--font-size-200); min-height: 100%; overflow-y: scroll; position: relative; } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --font-size-200: 14px; --font-size-300: 16px; --font-size-400: 20px; --font-size-500: 24px; --font-size-600: 32px; --font-weight-light: 300; --font-weight-semibold: 600; --font-weight-bold: 700; --rounding-200: 8px; --code-background: 0 0% 15%; --code-foreground: 0 0% 98%; --typographic-padding: 1rem; --typographic-quote-size: 1.5rem; } @media (min-width: 768px) { :root { --typographic-padding: 1.25rem; --typographic-quote-size: 2rem; } } @media (min-width: 1280px) { :root { --typographic-padding: 1.5rem; --typographic-quote-size: 2.5rem; } } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } .wrapper-masonry { position: relative; } .masonry-layout { box-sizing: border-box; display: grid; grid-gap: 1rem; padding: 0; } .masonry-layout.columns-1 { grid-template-columns: repeat(1, minmax(200px, 1fr)); } .masonry-layout.columns-2 { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .masonry-layout.columns-3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); } .masonry-layout.columns-4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); } .masonry-layout.columns-5 { grid-template-columns: repeat(5, minmax(200px, 1fr)); } .masonry-layout.columns-6 { grid-template-columns: repeat(6, minmax(200px, 1fr)); } .masonry-layout.columns-7 { grid-template-columns: repeat(7, minmax(200px, 1fr)); } .masonry-layout.columns-8 { grid-template-columns: repeat(8, minmax(200px, 1fr)); } .masonry-layout.columns-9 { grid-template-columns: repeat(9, minmax(200px, 1fr)); } input { font-size: var(--font-size-300); border-radius: var(--rounding-200); } .card { position: relative; overflow: hidden; border-radius: var(--rounding-200); background-color: var(--card); color: var(--card-foreground); cursor: pointer; transition: transform 0.2s; width: 100%; margin-bottom: 1rem; display: flex; flex-direction: column; } .card:hover { /* transform: scale(1.05); */ } .card img { width: 100%; height: auto; display: block; } .card-info { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.69); color: white; padding: var(--typographic-padding); display: flex; flex-direction: column; justify-content: start; align-items: baseline; opacity: 0; transition: opacity 0.2s; /* backdrop-filter: blur(8px); */ } .card:hover .card-info { opacity: 1; } .card .title { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold); margin-bottom: 0.25rem; } .card .description { font-size: var(--font-size-200); } .card .description a { text-decoration: none; } .card .description a:hover { text-decoration: underline; } .typographic-card { padding: var(--typographic-padding); border-radius: var(--rounding-200); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; transition: all 0.2s; width: 100%; box-sizing: border-box; min-height: 260px; } .typographic-name { font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; } .typographic-quote { font-size: var(--typographic-quote-size); margin-bottom: 0.75rem; line-height: 1.18; display: -webkit-box; } .typographic-url { font-size: var(--font-size-200); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; opacity: 0.69; } </style> </head> <body translate="no"> <div class="container mx-auto p-5"> <div class="flex justify-between items-center mb-4"> <div class="flex items-baseline"> <h1 class="text-3xl font-semibold pr-2">Logo</h1> <h2 class="text-base font-normal opacity-70"> <a href="">HOME</a></h2> </div> <button id="signupButton" class="bg-transparent text-slate-700 font-semibold py-2 px-4 border border-slate-500 rounded hover:bg-white hover:text-slate-900 hover:border-slate-500"> ME </button> </div> <input type="text" id="search" class="p-4 border mb-4 w-full" placeholder="Search..."> <div class="wrapper-masonry"> <div id="masonry"></div> </div> </div> <!-- Modal --> <div id="signupModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> <div class="flex items-center justify-center min-h-screen p-4"> <div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full p-8"> <div class="bg-white"> <div class="flex justify-between items-center mb-4"> <h2 class="text-2xl font-semibold">Subscribe to Desigeist</h2> <button id="closeModal" class="text-gray-400 hover:text-gray-600 text-2xl">×</button> </div> <div id="mc_embed_shell"> <div id="mc_embed_signup"> <form action="" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="mc-field-group mb-4"> <label for="mce-EMAIL" class="block text-sm font-medium text-gray-700">Email Address <span class="asterisk">*</span></label> <input type="email" name="EMAIL" class="required email mt-1 p-2 block w-full border rounded" id="mce-EMAIL" required> </div> <div class="mc-field-group mb-4"> <label for="mce-FNAME" class="block text-sm font-medium text-gray-700">First Name (optional)</label> <input type="text" name="FNAME" class="text mt-1 p-2 block w-full border rounded" id="mce-FNAME"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display: none;"></div> <div class="response" id="mce-success-response" style="display: none;"></div> </div> <div aria-hidden="true" style="position: absolute; left: -5000px;"> <input type="text" name="b_88328e131c58d0c0995e899eb_56742abe53" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="bg-transparent text-slate-700 font-semibold py-2 px-4 border border-slate-500 rounded hover:bg-white hover:text-slate-900 hover:border-slate-500 cursor-pointer" value="Get Spammed"> </div> </div> </form> </div> </div> </div> </div> </div> </div> <script> // Modal functionality const signupButton = document.getElementById('signupButton'); const signupModal = document.getElementById('signupModal'); const closeModal = document.getElementById('closeModal'); signupButton.addEventListener('click', () => { signupModal.classList.remove('hidden'); }); closeModal.addEventListener('click', () => { signupModal.classList.add('hidden'); }); window.addEventListener('click', (e) => { if (e.target === signupModal) { signupModal.classList.add('hidden'); } }); </script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fuse.min.js"></script> <script > const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const inspirationData = [ // Aug 1st { name: "Lost&Found Market Poster - March 24th", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Poster Design", fontsUsed: "", fontUrl: "", tags: ["poster", "market", "vintage", "design", "France"] }, { name: "GitHub Universe", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Landing Page", fontsUsed: "Mona Sans, MonaSansFallback", fontUrl: "https://github.com/GitHub/Mona-Sans", tags: ["GitHub", "software", "event", "conference"] }, { name: "1979 Volvo Laplander", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Automobile", fontsUsed: "", fontUrl: "", tags: ["Volvo", "Laplander", "vintage", "1979", "off-road"] }, { name: "Lummi Photo - Minimalist Vintage Bicycle", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Pablo Stanley", designerLink: "https://www.lummi.ai/creator/pablostanley", category: "Photography", fontsUsed: "", fontUrl: "", tags: ["bicycle", "minimalist", "vintage", "urban", "design"] }, { name: "Cero Magazine", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Publication", fontsUsed: "", fontUrl: "", tags: ["culture", "creativity", "inclusivity", "sustainability", "Broadway"] }, { name: "Objets Hermès", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Andy Rementer", designerLink: "https://andyrementer.com/", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["Hermès", "illustration", "art", "design", "Cargo"] }, { name: "Accueil Cantine Côtière", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Branding", fontsUsed: "", fontUrl: "", tags: ["restaurant", "food", "local", "marine", "branding"] }, { name: "Mini Paper Sculptures", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Imin Yeh", designerLink: "https://iminyeh.com/", category: "Design", fontsUsed: "", fontUrl: "", tags: ["sculpture", "paper", "art", "design"] }, { name: "Cookie and Milk Illustration", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Travis Foster", designerLink: "https://www.travisfoster.com", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["cartoon", "cookie", "milk", "whimsical", "art"] }, { name: "bitbird", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Music", fontsUsed: "Inter, -apple-system", fontUrl: "https://fonts.google.com/specimen/Inter", tags: ["record label", "independent", "San Holo", "music"] }, { name: "Don’t Stop Thinking About Tomorrow", url: "", colorPair: "pair6", colorPairInverted: "false", designer: "", designerLink: "", category: "Read", quote: "Mistakes will be made in the march towards the future.", tags: ["future", "mistakes", "thoughts", "reflection"] }, { name: "Telier", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Landing Page", fontsUsed: "GT Flexa Variable Regular, GT America Regular", fontUrl: "https://www.grillitype.com/typefaces/gt-flexa, https://www.grillitype.com/typefaces/gt-america", tags: ["workspace", "design", "travel", "community"] }, { name: "Choreus", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Andy Murray", designerLink: "", category: "Web Apps", fontsUsed: "", fontUrl: "", tags: ["platform", "art", "representation", "design"] }, { name: "Keep Smiling", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Diana Vera", designerLink: "https://dribbble.com/bioguss", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["illustration", "smile", "Dribbble", "Diana Vera", "creative"] }, // July 31st { name: "UPS - Under Pressure Solutions", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Landing Page", fontsUsed: "Times, serif", fontUrl: "https://www.fonts.com/font/monotype/times-new-roman", tags: [ "industrial design", "Milano Design Week 2024", "ECAL", "innovation", "design challenges" ] }, { name: "GGaide Conference 2023 in Montreal", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Landing Page", fontsUsed: "Es Allianz, Arial", fontUrl: "https://www.fontmirror.com/es-allianz", tags: ["conference", "video games", "philanthropy", "Montreal"] }, { name: "Emotion", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Pui Yan Fong", designerLink: "", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["illustration", "emotions", "art", "Pui Yan Fong"] }, { name: "Lummi - Silhouette Against Gradient", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "@lummipics", designerLink: "https://www.instagram.com/lummipics", category: "Photography", fontsUsed: "", fontUrl: "", tags: [ "AI stock photos", "silhouette", "gradient", "digital art", "royalty-free" ] }, { name: "Nostra", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Lucas Descroix", designerLink: "", category: "Typography", fontsUsed: "", fontUrl: "", tags: ["typeface", "in-progress", "Future Fonts", "Nostra"] }, { name: "Gojek Illustration", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["Gojek", "digital illustration", "flat design", "vector art"] }, { name: "Biquette Blanket", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Erin Jang", designerLink: "https://work.theindigobunting.com/", category: "Design & Illustration", fontsUsed: "", fontUrl: "", tags: ["design", "illustration", "crafts"] }, { name: "GUCCI GIRL", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "JINGOO", designerLink: "https://notefolio.net/jingoo", category: "Illustration", tags: ["GUCCI", "fashion illustration", "JINGOO", "art"] }, { name: "Señoras y Señoras", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "Rosa Tortosa", designerLink: "https://www.icarm.es/servlet/s.Sl?sit=c,889,m,3780,i,1&r=Portal-30349-ARCH_DETALLE_ARTISTA", category: "Illustration", fontsUsed: "", fontUrl: "", tags: ["colorful", "abstract", "geometric shapes", "art"] }, { name: "The Fridolin: A Volkswagen-engineered Mail Truck", url: "", imageUrl: `//repo.bfw.wiki/random/${getRandomInt(300, 600)}x${getRandomInt(300, 600)}/景色?rand=${getRandomInt(1, 10000)}`, designer: "", designerLink: "".........完整代码请登录后点击上方下载按钮下载查看
网友评论0