Uzyskaj szerokość Div i LIMIT kwerendy mySQL zgodnie z liczbą elementów? - php, javascript, jquery, mysql, html

Musiałem wyświetlić liczbę obrazów w formacie

<li><img class="1"><img class="1"><img class="1"></li>
<li><img class="1"><img class="1"><img class="1"></li>

ale ponieważ mój div automatycznie rośnie zgodnie zszerokość ekranu. Musiałem obliczyć liczbę wyświetlanych obrazów zgodnie z szerokością elementu div, załóżmy, że szerokość wynosi 1200 pikseli, a każdy obraz będzie miał 150 pikseli. więc liczba obrazów do wyświetlenia wynosi 8.

<script type="text/javascript">
var screen_width = document.getElementById("div_1").offsetWidth();
var no_of_images =Math.round(screen_width/100);
</script>

Pobieram obrazy z bazy danych mysql,używając zapytania LIMIT .. Chcę OGRANICZYĆ to do liczby obrazów, które otrzymałem przy użyciu var no_of_images. Ale ponieważ nie ma bezpośredniej zasady integracji zmiennej javascript z zapytaniem mysql. chcę przekazać go do zmiennej PHP, a następnie użyć go w MySQL. Ale niestety nie wiem, jak to zrobić.

Odpowiedzi:

Możesz użyć document.ready obsługi zdarzeń, aby upewnić się, że DOM jest gotowyzmanipulowane, a następnie wyślij żądanie AJAX do skryptu po stronie serwera, który może wyprowadzić kod HTML dla prawidłowej liczby obrazów do umieszczenia w kontenerze:

//wait for the `document.ready` event to fire
$(function () {

//cache the container element since it will be used later more than once
//also get the width of the container and figure out how many 150px wide images can fit without being clipped
//note that this does not take into consideration any padding/margin/border for the images
var $container   = $("#div_1"),
screen_width = $container.width(),
no_of_images = Math.floor(screen_width / 150);

//create an AJAX call to your server-side script to get the image HTML
$.ajax({
url  : "<URL>",
type : "get",//or "post"
data : { "no_of_images" : no_of_images },//jQuery will handle data encoding if you pass it an object
success : function (serverResponse) {

//now the AJAX request has returned successfully so this fades the container out, replaces it"s HTML with the server response and then fades back in
$container.fadeOut(500, function () {
$container.html(serverResponse).fadeIn(500);
});
},

//if an error occurs with the AJAX call this is how you handle it, you may just try to re-send the AJAX call
error   : function () {
alert("an error occured");
}
});
});

możesz przekazać go jako parametr get podczas ładowania plikustrona. na przykład podczas tworzenia linku do załadowania następnej strony po prostu dodaj go jako parametr. przy pierwszym wczytywaniu strony otrzymujesz wszystkie obrazy, ale wyświetlą się tylko te, które są potrzebne w dostępnej rozdzielczości

Musisz użyć AJAX.

<script type="text/javascript">
var screen_width = document.getElementById("div_1").offsetWidth();
var no_of_images =Math.round(width/100);

$.ajax({
type: "post",
url: "script.php",
data: "no_of_images="+no_of_images,
success: function(){
// do something
}
});
</script>

Musisz użyć jQuery, aby mój kod działał, ponieważ użyłem metody jQuery $ .ajax ().