时间戳

首页 > 解决方案 > 构建可排序和过滤的房地产网格

javascript - 构建可排序和过滤的房地产网格

问题描述

我有一个关于在 HTML、CSS 和 Javascript 中创建网格的问题，可以从高到低排序，反之亦然。您还应该能够过滤。

现在我正在使用引导程序做一个网格。谷歌搜索时，我可以看到许多人使用无序列表 ul 来做到这一点。我的问题是，你能制作一个实际上是 ul 的网格吗？

这是我开始编写的代码：

<body>
    <div class="container-fluid">
      
        <div class="filter">
          <h1>Boliger</h1>
          <button>Pris, Faldende</button>
          <button>Pris, Stigende</button>
        </div>
        <div class="properties">
        <ul>
            <div class="row">
          
          <li>
            <div class="col-sm-6">
            <div class="property" data-id="01">
              <img
                class="property__image image-fluid"
                src="assets/01.jpg"
                alt=""
              />
              <h2 class="property__title">Lige ud til vejen</h2>
              <p class="property__address">
                Dommervænget 6a, 2. th, 4000 Roskilde
              </p>
              <ul class="property__info">
                <li class="property__price">1.000.000,-</li>
                <li class="property__type">Villa</li>
                <li class="property__rooms">4 Rum</li>
                <li class="property__size">120 m2</li>
              </ul>
            </div>
          </div>
          </li>
          <li><div class="col-sm-6">
            <div class="property" data-id="02">
              <img class="property__image" src="assets/02.jpg" alt="" />
              <h2 class="property__title">Rustikt og lækkert</h2>
              <p class="property__address">
                Enghavevej 8, 1. th, 1674 København V
              </p>
              <ul class="property__info">
                <li class="property__price">2.500.000,-</li>
                <li class="property__type">Ejerlejlighed</li>
                <li class="property__rooms">2 Rum</li>
                <li class="property__size">80 m2</li>
              </ul>
            </div>
          </div>
        </li>

标签： javascripthtmlcss

解决方案

您可以使用CSS Flexbox Layout来显示网格，顾名思义它的灵活性，我们可以有效地控制网格内容的流动。我建议你学习/使用 vue.js，除非你想在 vanilla js 中编写所有代码——排序，然后显示结果，获取/更新数据等。此外，通过浏览这些主题——css flexbox、css-grid、vue.js（通常是单页应用程序开发），至少您将对解决上述问题有所了解。

推荐阅读