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: [&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0