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">&times;</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