ugrás a tartalomhoz

Hírek listázása while ciklussal, egy divbe csak 3 hír, majd új div nyitása

geforce9600gt · 2015. Ápr. 30. (Cs), 13.57
Sziasztok

Híreket listázok ki sql-ből, while ciklussal. Responsive design miatt a következő szerkezetre van szükségem:
<section class="main_items_section">
    <div class="row main_item_row">
        <div class="grid_main_item">
            <a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ablak"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_ajto"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
            <a href="muanyag_toloajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
    </div>
    <!-- Új .row div -->
    <div class="row main_item_row">
        <div class="grid_main_item">
            <a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ablak"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_ajto"><img src="images/catalog/2.jpg"></a>
            <a href="muanyag_ajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
            <a href="muanyag_toloajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
    </div> 
</section>
Hogy kell összeállítanom a ciklust, hogy hármasával rakja ki a híreket egy .row divbe?

- .row div nyitása
- 3 hír kirakása
- .row div zárása

- .row div nyitása
- 3 hír kirakása
- .row div zárása

- .row div nyitása
- 3 hír kirakása
- .row div zárása

És így tovább, ahány sor van...

Köszi előre is a help-et!
‹ Webworker és websocket Responsive (bootstrap) oldalnál gondok a képek megjelenítésénél ›
 ■
1

Underscore

Poetro · 2015. Ápr. 30. (Cs), 14.22
Mivel nem írtad, milyen függvénytárakat használsz, feltételeztem, hogy Underscore.js-t.
Ekkor a következő a megoldás, feltételezve, hogy a result tömb a href, image, title és description tulajdonságú objektumokat tartalmaz:
var template = '<div class="grid_main_item"><a href="<%- href %>"><img src="<%- image %>"></a><a href="<%- href %>"><h4><%- title %></h4></a><p><%- description %></p></div>';
var compiled = _.template(template);
var groups = _.groupBy(result, function (item, index) {
    return Math.floor(index / 3);
});
document.body.innerHTML = _.map(groups, function (group) {
    return '<div class="row main_item_row">\n' + group.map(compiled).join('\n') + '\n</div>\n';
}).join('\n');
2

Ezt biztos nekem akartad

geforce9600gt · 2015. Ápr. 30. (Cs), 14.49
Ezt biztos nekem akartad írni?? :) Semmi ilyen js cuccot nem használok.
3

HTML, CSS, JavaScript, Ajax

Poetro · 2015. Ápr. 30. (Cs), 15.10
Akkor miért ebben a témában küldted be?
4

Responsive design miatt a

Hidvégi Gábor · 2015. Ápr. 30. (Cs), 15.35
Responsive design miatt a következő szerkezetre van szükségem
Ha már reszponzív, akkor nem pont hogy ömleszteni kéne a <div class="grid_main_item">-eket, és css-ből megmondani, hol legyen a sortörés?
5

De attól még nem kerül új

geforce9600gt · 2015. Ápr. 30. (Cs), 15.41
De attól még nem kerül új .row divbe. És abba kellene, mert úgy jó már a megjelenés.
6

Kell-e, hogy az új .row-ba

Hidvégi Gábor · 2015. Ápr. 30. (Cs), 16.01
Kell-e, hogy az új .row-ba kerüljön? Most minden sorban legfeljebb három elem van, ami átlagos képernyőn biztos jól néz ki, de mi van a 16:9-es arányú monitorokkal, ahol akár öt is elférhetne egymás mellett?
7

Példa

Poetro · 2015. Ápr. 30. (Cs), 16.11
  <section class="news">
    <article>
        <a href="/link/title-01">
            <h1>Title 01</h1></a>
        <p>Description 01</p>
    </article>
    <article>
        <a href="/link/title-02">
            <h1>Title 02</h1></a>
        <p>Description 02</p>
    </article>
    <article>
        <a href="/link/title-03">
            <h1>Title 03</h1></a>
        <p>Description 03</p>
    </article>
    <article>
        <a href="/link/title-04">
            <h1>Title 04</h1></a>
        <p>Description 04</p>
    </article>
    <article>
        <a href="/link/title-05">
            <h1>Title 05</h1></a>
        <p>Description 05</p>
    </article>
  </section>
.news article {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 10px;
  box-sizing: border-box;
}
@media (min-width:500px) {
  .news article {
    width: 50%;
    float: left;
  }
}
@media (min-width:720px) {
  .news article {
    width: 33%;
  }
}
@media (min-width:1280px) {
  .news article {
    width: 25%;
  }
}
@media (min-width:1920px) {
  .news article {
    width: 20%;
  }
}
Demo
8

Így oldottam

geforce9600gt · 2015. Ápr. 30. (Cs), 21.23
Így oldottam meg:
<?php
			$sql = "SELECT hir_id, hir_cim, hir_seo, hir_rovid, hir_thumb, hir_status, hir_sorrend 
			FROM hir WHERE hir_status = 1 ORDER BY hir_sorrend ASC";
			$get_news = mysqli_query($kapcs, $sql);
			if(mysqli_num_rows($get_news) > 0 )
			{
				$i = 0;
				echo '<div class="row main_item_row">';
				while($n = mysqli_fetch_assoc($get_news))
				{
					if($i%3==0)
				    {
						echo '</div>';
						echo '<div class="row main_item_row">';
				    }
					?>
                    <div class="grid-1-3">
                        <a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>" 
                        title="<?php echo htmlspecialchars($n['hir_cim']); ?>">
                       	  <img src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/news/<?php echo htmlspecialchars($n['hir_thumb']); ?>" 
                          alt="<?php echo htmlspecialchars($n['hir_cim']); ?>">
                        </a>
                        <a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>" 
                        title="<?php echo htmlspecialchars($n['hir_cim']); ?>"><h4><?php echo htmlspecialchars($n['hir_cim']); ?></h4></a>
                        <p><?php echo htmlspecialchars($n['hir_rovid']); ?></p>
                    </div>
                    <?php
					$i++;
				}
				echo '</div>';
			}
			?>