Question

基于此thread

我正在尝试使用上述链接中的HTML图像。小提琴是here

body {
    margin: 0;
    padding: 0;        
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
}
.columns {
    background: red;
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;

    width: auto;
    overflow-x: auto;
}
.columns img{
  height:none;
  display: block; 
}
.columns > p:last-of-type {
    margin-right: 20px;
}

水平滚动效果很好，但图像也会分为columns。我不知道这甚至是可能的。我希望它与列的height保持一致，而自动width不与列宽保持一致。因此columns在它被转移之后就会出现。

Answer 1

我想我找到了一种可能的方法来实现我想要的东西。现在它使用了一点JS和Jquery。这是fiddle。

要点是检查page.offsetHeight＆lt; page.scrollHeight查看文本字段是否溢出。当它创建一个新的div。

这是JS：

$( document ).ready(function() {
    $( ".element2" ).each(function( i,obj ) {
            if(this.tagName == "IMG"){
                $("#paginatedText").append(obj);
            }else{
                paginateText(obj);
            }

            console.log(this.tagName);
  });



    function paginateText(element) {
        //console.log(element);
        var text = $(element).html(); // gets the text, which should be displayed later on
        //console.log(text);

        var textArray = text.split(" "); // makes the text to an array of words
        createPage(); // creates the first page
        for (var i = 0; i < textArray.length; i++) { // loops through all the words
                //$( ".element" ).last().append(textArray[i]);
                var success = appendToLastPage(textArray[i]); // tries to fill the word in the last page
                if (!success) { // checks if word could not be filled in last page
                        createPage(); // create new empty page
                        appendToLastPage(textArray[i]); // fill the word in the new last element
                }
        }
    }

    function createPage() {
    var page = document.createElement("div"); // creates new html element
    page.setAttribute("class", "page"); // appends the class "page" to the element
    document.getElementById("paginatedText").appendChild(page); // appends the element to the container for all the pages
    }

    function appendToLastPage(word) {
    var page = document.getElementsByClassName("page")[document.getElementsByClassName("page").length - 1]; // gets the last page
    var pageText = page.innerHTML; // gets the text from the last page
    page.innerHTML += word + " "; // saves the text of the last page
    if (page.offsetHeight < page.scrollHeight) { // checks if the page overflows (more words than space)
            page.innerHTML = pageText; //resets the page-text
            return false; // returns false because page is full
    } else {
            return true; // returns true because word was successfully filled in the page
    }
    }

});

具有水平滚动和图像的自动多列固定高度问题

1 个答案: