Построение сетки объектов недвижимости, которые можно сортировать и фильтровать

ProgramBox

Построение сетки объектов недвижимости, которые можно сортировать и фильтровать

Post author:admin
Запись опубликована:30 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть вопрос относительно создания сетки в HTML, CSS и Javascript, которая может быть отсортирована от наивысшей к наименьшей и наоборот. Вы также должны уметь фильтровать.

Прямо сейчас я делаю сетку с использованием bootstrap. При поиске в Google я вижу, что многие используют для этого неупорядоченные списки 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>

Ответ №1:

Попробуйте это, если вы хотите точно увидеть его с помощью snippet, сделайте полный экран, как вы устанавливали .col-sm-6

 <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container-fluid">

    <div class="filter">
      <h1>Boliger</h1>
      <button>Pris, Faldende</button>
      <button>Pris, Stigende</button>
    </div>
    <div class="properties">
      <ul class="row">
        <li 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>
        </li>
        <li 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>
        </li>
      </ul>
    </div>
  </div>
</body>

Ответ №2:

Вы можете использовать CSS Flexbox Layout для отображения сетки, поскольку ее название предполагает ее гибкость, и мы можем эффективно управлять потоком содержимого сетки. Я предлагаю вам изучить / использовать vue.js если вы не хотите кодировать все — сортировку, затем отображение результата, получение / обновление данных и т.д. в ванильном js. Также просматривая эти разделы — css flexbox, css-grid, vue.js (обычно разработка одностраничных приложений), по крайней мере, вы получите некоторое представление о решении вышеупомянутой проблемы.