Rellenar columnas verticalmente con php

[maxtorplextor]

Hola,
Es un tema del que nunca he sabido encontrar información y por lo visto muchos programadores no saben solventar tampoco. Se trata de rellenar 4 columnas por ejemplo con entradas de una base de datos.

Mi código html de la plantilla estática sería:

Código HTML:

<div id="footer">

<div class="col-1-4">
<div class="box">
<ul>
<li><a href="#">Entrada A</a></li>
<li><a href="#">Entrada B</a></li>
</ul>
</div>
</div>

<div class="col-1-4">
<div class="box">
<ul>
<li><a href="#">Entrada C</a></li>
<li><a href="#">Entrada D</a></li>
</ul>
</div>
<div class="col-1-4">
<ul>
<li><a href="#">Entrada E</a></li>
<li><a href="#">Entrada F</a></li>
</ul>
</div>
</div>

<div class="col-1-4">
<div class="box">
<ul>
<li><a href="#">Entrada G</a></li>
<li><a href="#">Entrada H</a></li>
</ul>
</div>
</div>

</div> 

Lo que quiero conseguir es que por php se rellenen dinámicamente mis columnas, verticalmente A-Z y de izquierda a derecha por columnas para que queden como en la plantilla de arriba. El número de entradas va cambiando en función de la página en la que te encuentras entonces, lo que tiene que hacer el php imagino es:
-primero contar el número de entradas a mostrar
-dividir ese número por el número de columnas (4 en este caso), para saber así cuántas entradas van en cada columna para que queden uniformes (excepto la última que soportaría las desviaciones de una entrada más o menos).
-y empezar a rellenar A-Z empezando con la columna 1.

Una solución que me han dado pero que no es aceptable, es la siguiente. No es aceptable porque incluso mete todas las entradas/los enlaces dentro de un <div class="box"> cuando en la plantilla hay un sólo <div class="box"> por cada columna:

Código HTML:

<div class="col-1-4">
<div class="box">
<a href="{{ path('campo1_show',{'campo2Slug' : entity.campo2.slug, 'slug': entity.slug}) }}">Entrada {{ entity }}</a>
</div>
</div> 

El resultado de esto es que cada enlace está en un <div class="box"> cuando todos los enlaces de la columna tienen que estar juntos dentro de ese box. Y además no logra rellenarla como yo quiero, que es como he mencionado antes.

Espero que se entienda mi problematica y estaría agradecido de conocer vuestras opiniones al respecto, si alguna vez habéis tenido que hacer esto.

[pateketrueke]

y por lo visto muchos programadores no saben solventar tampoco

Pues yo sí se hacerlo, es extremadamente simple, no es necesario que menosprecies las habilidades de nadie.

Si la plantilla es estática y siempre habrán 4 columnas, además de que ya tienes separada la información en 4 arrays diferentes (los pasos que mencionas, supongo).

Código PHP:

<row>
<?php foreach ($collection as $subcollection) { ?>
 
<cell>
<?php foreach ($subcollection as $item) { ?>
 
<?php } ?>
</cell>
 
<?php } ?>
</row>
 

Y bueno:

Una solución que me han dado pero que no es aceptable

La idea es que pienses por ti mismo, no que alguien piense la solución por ti, es un descaro venir a despreciar el tiempo que alguien más ha invertido tratando de orientarte.

Esos comentarios que haces son despectivos, en fin, ojalá entiendas la idea para que puedas resolver el problema usando tu cabeza.

[xfxstudios]

asi lo podrias hacer, claro ve como evitar que el ultimo registro del div anterior se repita en el siguiente, no he tenido tiempo de ver eso:

Código PHP:

$con=1;
echo "<div class='col-1-4'>";
while($row = $f->fetch_array())
 
{   
        echo "<li>".$con." -".$row['menu']."</a></li>";
        //echo"</div>";
 
        $con++;
 
 
//Segundo bloque si ya se mostraron los dos registros anteriores
    if($con == 3){
        
        echo "</div><div class='col-1-4'>";
        echo "<li>".$con." -".$row['menu']."</a></li>";
        
        $con++;
        } if($con == 5){
        
        echo "</div><div class='col-1-4'>";
        echo "<li>".$con." -".$row['menu']."</a></li>";
        
        $con++;
        } if($con == 7){
        
        echo "</div><div class='col-1-4'>";
        echo "<li>".$con." -".$row['menu']."</a></li>";
        
        $con++;
        } 
    
}
 
echo "</div>";
 
?>
 
<style>
.col-1-4{
    padding:15px;
    background-color:rgba(201,197,197,1.00);
    width:300px;
    display:block;
    position:relative;
    float:left;
    margin-left:20px;
    margin-top:10px;
 
}
.col-1-4:hover{
    background-color:rgba(0,67,123,1.00);
    color:rgba(255,255,255,1.00);
 
}
.col-1-4 li{
    margin-bottom:10px;
    text-decoration:none;
}
.col-1-4 li a{
 
    text-decoration:none;
}
</style>
 

[maxtorplextor]

Iniciado por pateketrueke

Pues yo sí se hacerlo, es extremadamente simple, no es necesario que menosprecies las habilidades de nadie.
Esos comentarios que haces son despectivos, en fin, ojalá entiendas la idea para que puedas resolver el problema usando tu cabeza.

Pues si te parece despectivo, no era la intención pero bueno, espero que sólo sea tu percepción. Lo que digo creo que es verdad: parece simple pero no encuentro muchas webs que lo apliquen y me suelo fijar es esto mismo. La mayoría lo resuelven rellenando las columnas parecido pero de izquierda a derecha pasando por cada columna, de modo que no quedan A-Z vertical por columnas.

Iniciado por pateketrueke

Si la plantilla es estática y siempre habrán 4 columnas, además de que ya tienes separada la información en 4 arrays diferentes (los pasos que mencionas, supongo).

La idea es que pienses por ti mismo, no que alguien piense la solución por ti, es un descaro venir a despreciar el tiempo que alguien más ha invertido tratando de orientarte.

No tengo la info separada por ningún array. La verdad es que subcontrato estas cosas, así que si pagas...supongo que sí que puedo esperar que piensen por mi. Que no es el caso de la consulta en este foro pero sí es algo por lo que he pagado ya varias veces. Y tan sólo me extrañaba, que programadores que son capaces de hacer cosas mucho más complejas que esto, no son capaces de darme solución a mi relleno de columnas. Y puedo decir que los programadores esos eran cracks en mil otras cosas, pero en lo de la columna, puedes ver el resultado en mi primer comentario, digo yo que por algo será.

[maxtorplextor]

Iniciado por xfxstudios

asi lo podrias hacer, claro ve como evitar que el ultimo registro del div anterior se repita en el siguiente, no he tenido tiempo de ver eso:

Gracias, tiene muy buena pinta. No entiendo tu último apunte. Es decir de la manera en que está ahora, el script repetiría los resultados de la columna anterior y que deberían filtrarse en ese sentido no?

[maxtorplextor]

Iniciado por pateketrueke

Pues yo sí se hacerlo, es extremadamente simple

Pues si es tan extremadamente simple quizás podrías ilustrar un modelo completo para el archivo del foro. Cocinando el array y todo.

[pateketrueke]

No tengo la info separada por ningún array. La verdad es que subcontrato estas cosas, así que si pagas...supongo que sí que puedo esperar que piensen por mi.

Pues que mejor que lo aclaras, yo igual prefiero que me paguen para invertir tiempo en soluciones para aquellos que no tienen las habilidades, en tu caso aplicaría muy bien.

Seguro alguien más también piensa igual, si no eres programador y tienes un problema entonces pagar jamás es mala idea.

Si no eres programador y buscas soluciones que no podrás aplicar se complica el tema.

Saludos.

[maxtorplextor]

La verdad que tu último mensaje no lo logro entender del todo, más o menos intuyo lo siguiente:
1. quieres trabajar para mi¿
2. esto más o menos lo entiendo, es una obviedad
3. te estás escaqueando de no postear el modelo completo que es extremadamente sencillo
Lo he entendido bien o no?

[jlusc98]

Si pones más info sobre las tablas es facil hacerlo. Yo también he estado en tu lugar, sin encontrar mucha info sobre ese tema. Hasta que me mostraron dos paginas esenciales: 1 el manual de mysql y 2. esta: http://www.artfulsoftware.com/infotree/queries.php

Una vez te pones y lo comprendes es bien sencillo.

[pateketrueke]

Si tenemos una lista con todos los items sólo hay que recortar los trozos:

Código PHP:

<?php
 
$list = str_split('ABCDEFGHIJKLMNO');
$collection = array_chunk($list, 4);
 
?>
<row>
<?php foreach ($collection as $subcollection) { ?>
 
<cell>
<?php foreach ($subcollection as $item) { ?>
<item><?php echo $item; ?></item>
<?php } ?>
</cell>
 
<?php } ?>
</row>
 

Si el orden esperado no es ese sólo hay que recalcular la lista inicial y volver a cortar, o bien, recalcular cada sublista individualmente.

[maxtorplextor]

Iniciado por pateketrueke

Si tenemos una lista con todos los items....

Bueno, parece una solución, efectivamente. Ya veo tres modelos de solución por aquí, quizás lo que comenta julusc98 si lo entiendo bien, puede ser la mejor. Pero tienen buena pinta todas. Faltaría ver cómo encajaría todo eso en mi modelo, que a todo esto se añadiría la problemática de la responsiveness de la plantila, que no sé si tu solución en concreto se podría aplicar directamente ya que es una tabla simulada con ul, li.

[NSD]

Código PHP:

<row>
<?php foreach ($collection as $subcollection) { ?>
 
<cell>
<?php foreach ($subcollection as $item) { ?>
<item><?php echo $item; ?></item>
<?php } ?>
</cell>
 
<?php } ?>
</row>
 

creo que la apertura y cierre de "<row>" irian dentro del foreach no por fuera
EDITO: No me queda claro la diferencia entre row y cell, pero bueno, la idea esta, solo era una observacion.
PD: Yo queria publicar la variante usando array_chunk pero llegaste primero